时间戳

首页 > 解决方案 > 如何通过设置 v-model 来更新现有的 v-select？

vue.js - 如何通过设置 v-model 来更新现有的 v-select？

问题描述

我一直在自学 Vue（成功有限），但遇到了以下问题。

我有两个，每个都有一个 v-model：

Select 1:
<v-select
    class="pr-2"
    :items="latteSizeList"
    v-model="sizeid"
    item-text="sizename"
    item-value="id"    
    @change="updateAvailibleOz(), calculate(), togglesizeSelected()"
    solo
    >
</v-select>

Select 2:
<v-select
    :items="shotsArray"
    v-model="shotcount"
    :value.sync="shotcount"
    item-text="shotsAmountName"
    item-value="shotsAmountAmount"
    @change="calculate()"
    solo
    >
</v-select>

我想在调用函数 togglesizeSelected() 时更新第二个 v-select 的显示值。

methods: {
    togglesizeSelected: function () {
        this.shotcount= this.sizeList.filter( (item) => item.id.indexOf(this.sizeid) > -1)[0].latteshots;
        console.log("Shots Count: " + this.shotcount)
    },
}

变量正在更新并显示在控制台中。但我无法让显示的项目更新。我错过了什么？

标签： vue.jsvuetify.js

解决方案

有趣的是我今天遇到了同样的问题:)

（如果控制台隐藏了解决方案，只需单击“整页”）

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      sizeid: null,
      latteSizeList: [{
          id: 0,
          sizename: "Small",
          latteshots: 5,
        },
        {
          id: 1,
          sizename: "Large",
          latteshots: 10,
        },
      ],
      shotcount: null,
      shotsArray: [{
          shotsAmountName: "5 shots",
          shotsAmount: 5,
        },
        {
          shotsAmountName: "10 shots",
          shotsAmount: 10,
        },
      ],
    }
  },
  methods: {
    latteSizeListClickHandler(e) {
      this.togglesizeSelected(e)
      this.calculate()
    },
    togglesizeSelected({
      latteshots
    }) {
      this.shotcount = this.shotsArray.find(({
        shotsAmount
      }) => shotsAmount === latteshots)
    },
    calculate() {
      console.log('calculate executed')
    }
  },
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-main>
      <v-container>
        Select 1:
        <v-select class="pr-2" :items="latteSizeList" v-model="sizeid" item-text="sizename" item-value="id" @change="(e) => latteSizeListClickHandler(e)" return-object solo>
        </v-select>

        Select 2:
        <v-select :items="shotsArray" v-model="shotcount" item-text="shotsAmountName" item-value="shotsAmountAmount" solo>
        </v-select>
      </v-container>
    </v-main>
  </v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

我的想法：

  1. 不要在模板中的处理程序上放置多个函数。而是创建一个“组合函数”，然后调用它。（一般来说，尽量让模板在 JS 代码方面尽可能简单。这只是个好建议。）
  2. 你必须
  • 设置v-select返回整个对象不是value唯一的。您可以通过添加return-object到v-select
  • 将对象作为参数传递给处理函数（(e) => latteSizeListClickHandler(e)->e是参数）
  • 将 设置为shotcount中的对象，shotsArray不仅是它的shotsAmount
  • :value.sync="shotcount"从第二个中删除v-select。.sync用于其他东西（这是对子组件中发出的事件做出反应的简写语法）

瞧！作品v-select！

用更短的方式：

  • return-object第一次使用v-select
  • 在 & 中找到对象shotsArray并设置shotcount为该对象
  • 删除:value.sync- 这搞砸了v-model

推荐阅读