v-select 옵션의 특성을 설정하는 방법

v-select 옵션의 특성을 설정하는 방법

Vue부터 시작하여 베스트 프랙티스에 대한 조언이 필요합니다.

달성하려고 하는 것: 설정makeId선택한 옵션에 따라 makes option id와 동일합니다.예를 들어 드롭다운에서 "bmw"를 선택하면makeId2가 됩니다.

Vuetify를 사용하지 않으면 클라우드에서 각 옵션에 데이터 속성을 설정할 수 있습니다.v-for루프하고 나서@change그 속성을 잡아서 값을 할당하는 것만으로makeid.

Vuetify를 사용하여 무엇을 할 수 있습니까?

<v-select v-model="car.make" :items="makes" item-value="name" item-text="name"> </v-select>

data: function() {
  return {
    car: { make: "", makeId: "" },
    makes: [{ name: "audi", id: "1" }, { name: "bmw", id: "2" }]
  };
}

갱신:

바인드 할 수 있습니다.id처럼item-value및 그 위에v-model할당해야 합니다.car.madeId대신car.make단일 값이 필요한 경우:

<v-select v-model="car.makeId" :items="makes" item-value="id" item-text="name"> </v-select>

또는 오브젝트 바인딩에 다른 메서드를 사용할 수도 있습니다.

여기 그것을 위한 포크가 있다: 코드펜

여기서 가장 어려운 점은 오브젝트에 두 가지 형식이 있다는 것입니다.매핑할 필요가 있다id/name그리고.make/makeId일을 복잡하게 만들죠

속성 매핑이 없어도 이 작업은 간단합니다.return-object에서v-select.

그것이 불가능하다고 가정할 때, 한 가지 대안은 다음과 같습니다.car속성 이름을 변경할 때 선택한 값을 기준으로 계산된 속성으로 사용됩니다.이것은 다음과 같습니다.

new Vue({
  el: '#app',
  vuetify: new Vuetify(),

  data () {
    return {
      selectedCar: null,
      makes: [{name: 'audi', id: '1'}, {name: 'bmw', id: '2'}]
    }
  },
  
  computed: {
    car () {
      const selectedCar = this.selectedCar
      
      if (selectedCar) {
        return {
          make: selectedCar.name,
          makeId: selectedCar.id
        }
      }
    }
  }
})

#app {
  padding: 10px;
}

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://unpkg.com/mdi@2.2.43/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://unpkg.com/vuetify@2.0.5/dist/vuetify.min.css" rel="stylesheet">
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@2.0.5/dist/vuetify.min.js"></script>

<div id="app">
  <v-app>
    <p>{{ car }}</p>
    <v-select v-model="selectedCar" :items="makes" item-value="name" item-text="name" return-object> </v-select>
  </v-app>
</div>

그 대신 두 사람 사이의 관계를 뒤집을 수 있다.car그리고.selectedCar하도록car인data그리고.selectedCar는 계산된 속성입니다.그러기 위해서는 getter와 setter를 구현해야 합니다.

new Vue({
  el: '#app',
  vuetify: new Vuetify(),

  data () {
    return {
      car: {make: '', makeId: ''},
      makes: [{name: 'audi', id: '1'}, {name: 'bmw', id: '2'}]
    }
  },
  
  computed: {
    selectedCar: {
      get () {
        return this.makes.find(make => make.id === this.car.makeId)
      },
      set (selectedCar) {
        this.car = {
          make: selectedCar.name,
          makeId: selectedCar.id
        }
      }
    }
  }
})

#app {
  padding: 10px;
}

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://unpkg.com/mdi@2.2.43/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://unpkg.com/vuetify@2.0.5/dist/vuetify.min.css" rel="stylesheet">
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@2.0.5/dist/vuetify.min.js"></script>

<div id="app">
  <v-app>
    <p>{{ car }}</p>
    <v-select v-model="selectedCar" :items="makes" item-value="name" item-text="name" return-object> </v-select>
  </v-app>
</div>

세 번째 대안은 도랑을 치는 것이다.v-model다 같이 쓰고 그냥...:value/@input직접 페어링:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),

  data () {
    return {
      car: {make: '', makeId: ''},
      makes: [{name: 'audi', id: '1'}, {name: 'bmw', id: '2'}]
    }
  },
  
  methods: {
    onInput (id) {
      const make = this.makes.find(make => make.id === id)
      
      this.car = {
        make: make.name,
        makeId: make.id
      }
    }
  }
})

#app {
  padding: 10px;
}

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://unpkg.com/mdi@2.2.43/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://unpkg.com/vuetify@2.0.5/dist/vuetify.min.css" rel="stylesheet">
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@2.0.5/dist/vuetify.min.js"></script>

<div id="app">
  <v-app>
    <p>{{ car }}</p>
    <v-select :value="car.makeId" :items="makes" item-value="id" item-text="name" @input="onInput"> </v-select>
  </v-app>
</div>

언급URL : https://stackoverflow.com/questions/57445033/how-to-set-an-attribute-on-a-v-select-option