javascript - 选择选项上的 Vue 更新道具

Question

我正在使用 vue cli，并且可以选择显示测量值的下拉列表。我想知道选择测量时如何更新道具？

我有一个用户资料卡，它打开一个带有显示该用户测量值的图表的模式，当我处于模式中时，我想选择另一个测量值并显示它。

因此，当我单击音量时，图表文本会更改为音量并显示该用户的音量数据。

我尝试通过事件侦听器@change 为图表的文本执行此操作，但道具没有传递并更改文本：

Select: <select name="show" class="show" v-model="value" @change="newText($event)">
                    <option :value="{ text: 'Volume'}">Vol</option>
                    <option :value="{ text: 'Weight'}">Weight</option>
                    <option :value="{ text: 'Temperature'}">Temp</option>
        </select> 

<script>
newText: function(event) {
        const text = this.value.text;
        this.text = text;
        },
<script>

这是一个代码框示例。

任何帮助都会很棒，谢谢！

Answer 1

您需要找到用户对象并呈现该用户的值。在这里，我使用选项卡内的计算属性找到单击的用户并呈现该用户的值。密码箱。

内部计算Tabs.vue：

computed: {
    selectedUser() {
      if (this.name) {
        let name = this.name;
        return this.users.find(e => e.name == name);
      } else return {}
    }
  }