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 (){...。所以在声明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的vue-chartjs的BarChart自动

即使你是

• 使用reactivePropmixin ; 和
• 更换标签

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

我注意到发生这种情况是因为图表仅对整体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）。