javascript - 我们如何在 Vue JS 中使用“name”或“id”属性值作为 data 属性？

Question

我正在开发一个 SPA 应用程序，其中有一个数据变量列表，这些变量<option>用作dropdown. 我想在@change事件发生时导航到另一个页面，dropdown因此我想使用命令的id或name作为select数据属性的名称。这就是我的意思：

这是我在data函数中的内容：

data(){
  return {
      participants: [
          { value: 0, linkText: '', linkTerm: 'Select' },
          { value: 1, linkText: '/meetings/participants/create', linkTerm: 'Add New' },
          { value: 2, linkText: '/meetings/participants', linkTerm: 'All Participants' },
      ],
      positions: [
          { value: 0, linkText: '', linkTerm: 'Select' },
          { value: 1, linkText: '/meetings/positions/create', linkTerm: 'Add New' },
          { value: 2, linkText: '/meetings/positions', linkTerm: 'All Positions' },
      ],

  }
}    

这是select我使用上述data变量作为标签的<option>标签：

<select name="participants" id="participants" class="select-field" @change="changeRoute($event)">
  <option v-for="p in participants" :value="p.value">{{ p.linkTerm }}</option>
</select>  

现在我想要一个函数changeRoute($event)，我将从它导航到不同的页面，因此我想使用idorname值作为data属性，这里是函数：

methods:{
    changeRoute($event){
        var name = $event.target.name;
        var value = document.getElementById($event.target.id).value;
    }
}  

在上面的函数中，我想使用name如下data属性：

I want to write this:  
this.name[value].linkText;

而且因为name这里是标签的名称，participants所以上面的代码行应该是这样的：

this.participants[value].linkText  

那应该返回函数对象linkText的。participantsdata

提前感谢任何帮助。

标签： javascriptvue.jsvue-component

Answer 1

更改以下行

this.name[value].linkText;

至

this[name][value].linkText;