VueJs - 在方法之间传递变量

Question

有一个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>

Answer 1

在内部方法中，您可以使用data引用this属性。

在您的情况下，您可以使用this.datacollection.datasets.label并分配给它：

methods: {
  // ...
  fillData(selected){
     this.datacollection.datasets[0].label = selected;
  },
}

当然，假设selected是您要分配给label的字符串。

注意： this仅在您使用methodName() {}（按原样）或methodName: function (){...声明方法时才有效。所以don't use arrow functions when declaring vue methods，他们会搞砸你的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"相同。这就是你想要的。

See demo JSFiddle here

自动更新label的{​​{1}} vue-chartjs

即使你是

• using the reactiveProp mixin;和
• 更改标签

图表未自动反映更改（标签不会更改）。

我注意到这是因为图表只对整个BarChart 更改做出反应，而不是对内部属性（如datacollection）做出反应。

所以解决方案是：

• “clone”label
• 更新克隆的datacollection
• 将克隆分配给label

图表将作出反应（标签更改将被反映）。

因此，请将this.datacollection方法更改为以下内容：

fillData

检查here a working DEMO CODESANDBOX of this solution（请参阅fillData(selected){ let collectionClone = Object.assign({}, this.datacollection); collectionClone.datasets[0].label = selected; this.datacollection = collectionClone; }, 的{​​{1}}方法。）