VueJs — передача переменных между методами

Есть компонент v-select, и при изменении я запускаю fillData(selected), где выбран v-model. И мне нужно обновить метку в datacollection.datasets.label при изменении. Как я могу это сделать ?

<script>
  import BarChart from './BarChart.js'
  import { mapGetters, mapActions } from "vuex";

  export default {
    name : "TestLegPerformance",
    components: {
      BarChart
    },
    data: () => ({   
      datacollection : {
          labels: ['Week-1','Week-2','Week-3'],
          datasets: [
            {
                label: '',
                backgroundColor: '#C58917',
                data: [40, 50, 20]
            }
          ]
        },
      selected: []

    }),
     computed: {
        ...mapGetters({
        planNames: "planNames"
        })
    },
    mounted () {
        this.getAllPlanNamesAction();
    },
    methods: {
      ...mapActions(["getAllPlanNamesAction"]), 
      fillData(selected){
          console.log(selected)
      },
    }
  }
</script>

person Jay Vignesh    schedule 28.02.2018    source источник


Ответы (1)


Внутри методов вы можете ссылаться на 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
comment
Покажи свой v-select - person acdcjunior; 28.02.2018
comment
‹v-select label=Выберите план :items=planNames v-model=selected single-line max-height=auto :change = fillData(selected) required › - person Jay Vignesh; 28.02.2018
comment
Спасибо, но метка все равно не изменится и не отразится в пользовательском интерфейсе. - person Jay Vignesh; 28.02.2018
comment
Взгляните на демо JSFiddle. В этой демонстрации это отражает - person acdcjunior; 28.02.2018
comment
Еще раз спасибо, и да, когда я помещаю его непосредственно в элемент div, он меняется, но я пытаюсь создать гистограмму, и теперь я просто пытаюсь изменить имя на основе выбора. - person Jay Vignesh; 28.02.2018
comment
Откуда это BarChart.js? Возможно график просто не реагирует на изменения в .label автоматически. Возможно, вам нужно вызвать .setLabel('new label'), чтобы изменить метку. - person acdcjunior; 28.02.2018
comment
Я использую VueChart.js, и у меня есть отдельный barchart.js. Это barchart.js. import { Bar, mixins } from 'vue-chartjs' const { reactiveProp } = mixins export default { extends: Bar, mixins: [reactiveProp], props: ['options'], Mounted () { // this.chartData создается в миксине. // Если вы хотите передать параметры, создайте локальный объект параметров this.renderChart(this.chartData, this.options) } } - person Jay Vignesh; 28.02.2018
comment
Покажите свою <bar-chart .. декларацию в шаблоне. - person acdcjunior; 28.02.2018
comment
‹v-card› ‹гистограмма class=small :chart-data=datacollection›‹/bar-chart› ‹/v-card› - person Jay Vignesh; 28.02.2018
comment
График может быть не реактивным в конце концов !! - person Jay Vignesh; 28.02.2018
comment
Да, я тестирую здесь, и похоже, что это не так: codepen.io/acdcjunior/pen/bLOOBe< /а> - person acdcjunior; 28.02.2018
comment
Кроме того, я сделал ошибку: правильно @change="fillData", а не @change="fillData(selected)". А также dataset — это массив: правильным будет this.datacollection.datasets[0].label = selected;, а не this.datacollection.datasets.label = selected;. Я обновил вопрос и демо-скрипт, чтобы исправить это. - person acdcjunior; 28.02.2018
comment
О, позвольте мне проверить это. Очень ценю помощь. Изменится ли сейчас лейбл? - person Jay Vignesh; 28.02.2018
comment
Метка меняется, но мне нужно щелкнуть ту часть пользовательского интерфейса, где есть метка, и только тогда изменение отражается - person Jay Vignesh; 28.02.2018
comment
Под изменением вы имеете в виду и в графике? - person acdcjunior; 28.02.2018
comment
Я не вносил изменения в часть диаграммы. только этикетка. Метка изменяется даже в вашей скрипке, когда вы нажимаете на метку, где написано «данные один», и меняется на «материал», когда вы нажимаете на нее. Проверьте это. - person Jay Vignesh; 28.02.2018
comment
Да, но я заметил, что это не меняется в таблице. Но я думаю, что знаю, почему. Кажется, вы не можете просто обновить label, вам нужно переустановить весь datacollection, чтобы диаграмма реагировала на него. сейчас проверяю эту теорию - person acdcjunior; 28.02.2018
comment
Да, точно !! Наполни меня человеком !! Большое спасибо за помощь!! Ценить это - person Jay Vignesh; 28.02.2018
comment
Я считаю, что у меня это сработало. Проверьте обновленный ответ. - person acdcjunior; 28.02.2018