使用 select 选项作为条件，Vuejs 和 vuetify

Question

嘿，我正在尝试让下拉菜单 (v-select) 在两个不同的内容之间进行切换以显示。在此示例代码中，变化发生在两个 console.logs 之间。当我运行这段代码时，我需要在方法进入另一个语句之前选择一个选项两次。为什么是这样？我该如何解决这个问题？

        <v-select
          v-model="category"
          :items="categories"
          item-text="text"
          item-value="value"
          single-line
          auto
          label="Filter"
          prepend-icon="search"
          @change="a();"
          >
        </v-select>


export default {
  data (){
    return {
      category: null,
      categories: [
        {
          value: 1,
          text: 'Arbete',
          selected: true
        },
        {  
          value: 2,
          text: 'Arbetare',
          selected: false
        }
      ]
     }

      },
      methods: {
        a (){

          if(this.category == 1){

           console.log("work  " + this.category)

        }else{
          console.log("labour  "+ this.category)
        }

      }
  }

Answer 1

使用$nextTick

methods: {
     a() {
         this.$nextTick(() => {
             if (this.category == 1) {
                 console.log("work  " + this.category)
             } else {
                 console.log("labour  " + this.category)
             }
         })
     },
  }

使用 select 选项作为条件，Vuejs 和 vuetify

Using select option as condition, Vuejs and vuetify

vuejs2

vuetify.js