Vue-如何访问计算属性的调用控件

时间:2018-10-11 17:12:08

标签: javascript html vuejs2 html-select v-model

采用以下示例代码:

new Vue({
  el: '#app',
  data: {
    name: 'Test'
  },
  computed: {
  	hover: function () {
        //I'd like to use the "data-prefix" here instead of "XXX"
    	return this.name + "XXX"; 
    }  
  }
})
<script src="https://unpkg.com/vue"></script>

<div id="app">
  <select>
    <option data-prefix="ABC" v-bind:title="hover">1</option>
    <option data-prefix="XXX" v-bind:title="hover">2</option>
    <option data-prefix="YYY" v-bind:title="hover">3</option>
  </select>
  
  <input type="text" name="name" v-model="name">
</div>

在这里,我有一个旧版应用程序,该应用程序在其中生成带有varios选项的select。我已经修改了旧版应用程序,将所需的所有信息放入“数据-”属性(加上“ v-bind”)。

现在,我想以各种方式在Vue控件中使用此信息,在此特定示例中,我想在我选择的每个选项的title属性中使用“ data-prefix”。

但是,我不知道如何从计算的属性访问该属性。 Vue有办法做到这一点吗?

为此,我一直在寻找at the documentation,但在任何地方都看不到这一点。这在别的地方做过吗?

1 个答案:

答案 0 :(得分:0)

如评论中所述,您实际上将需要重新考虑如何将数据设置为组件数据或属性。然后直接从中使用它,而不是将数据绑定到DOM属性并从DOM访问它。

例如,在上面提到的用于显示悬停的示例中,您实际上不需要数据前缀DOM属性。可以将其设置为数据中的数组。然后从数组设置为标题以显示您的悬停。像这样:

new Vue({
  el: '#app',
  data: {
    prefix:[{id:1, name:'ABC'}, {id:2, name:'XXX'}, {id:3, name:'YYY'}],
    name: 'Test'
  }
})
<script src="https://unpkg.com/vue"></script>

<div id="app">
  <select>
    <option v-for="obj in prefix" :title="name+obj.name">{{obj.id}}</option>
  </select>
  
  <input type="text" name="name" v-model="name">
</div>