Внутри методов вы можете ссылаться на data
свойства, используя this
.
В вашем случае вы можете использовать this.datacollection.datasets.label
и присвоить ему:
methods: {
// ...
fillData(selected){
this.datacollection.datasets[0].label = selected;
},
}
Конечно, это при условии, что selected
— это строка, которую вы хотите присвоить label
.
Примечание. this
будет работать, только если вы объявите методы с помощью methodName() {}
(как вы есть) или methodName: function (){...
. Поэтому не используйте функции стрелок при объявлении методов vue, они испортят ваш this
.
Привязать к событиям, используя @
(v-on
), а не :
v-bind
)
Ваш шаблон:
<v-select label="Select a Plan" :items="planNames" v-model="selected" single-line max-height="auto" :change="fillData(selected)" required >
Чтобы прослушать событие изменения, не используйте:
:change="fillData(selected)"
использовать
@change="fillData"
Не отправляйте аргумент (это все испортит). v-select
уже пришлет вам один.
Обратите внимание на замену :
на @
.
Первый, :
, является псевдонимом v-bind
. Итак, :change="xyz"
совпадает с v-bind:change="xyz"
.
Второй, @
, является псевдонимом v-on
. Итак, @change="xyz"
совпадает с v-on:change="xyz"
. это то, что вы хотите.
См. демонстрацию JSFiddle здесь.
Обновление label
из BarChart
vue-chartjs
автоматически
Даже если вы
Диаграмма не отражает изменения (метка не меняется) автоматически.
Я заметил, что это происходит потому, что диаграмма реагирует только на все datacollection
изменения, а не на внутренние свойства (например, label
).
Итак, решение состоит в следующем:
- "клон"
datacollection
- обновить
label
клона
- назначить клон
this.datacollection
И график отреагирует (изменение метки отразится).
Итак, измените свой метод fillData
на следующее:
fillData(selected){
let collectionClone = Object.assign({}, this.datacollection);
collectionClone.datasets[0].label = selected;
this.datacollection = collectionClone;
},
Проверьте здесь рабочий DEMO CODESANDBOX этого решения. (см. метод changeLabelAndReassign()
из BarChart.vue
).
person
acdcjunior
schedule
28.02.2018