vue.js 2에서 선택한 옵션을 설정하려면 어떻게 해야 합니까?

vue.js 2에서 선택한 옵션을 설정하려면 어떻게 해야 합니까?

컴포넌트 vue는 다음과 같습니다.

<template>
    <select class="form-control" v-model="selected" :required @change="changeLocation">
        <option :selected>Choose Province</option>
        <option v-for="option in options" v-bind:value="option.id" >{{ option.name }}</option>
    </select>
</template>

나는 이것을 사용한다:<option :selected>Choose Province</option>선택하신 것

그러나 실행 시 gulp watch에 오류가 발생함

다음과 같은 오류:

./~/vue-disc/lib/sisc-disc.id=data-v-53777228!의 오류입니다./~/vue-load err/lib/syslog.type=syslog&index=0!/resources/assets/js/컴포넌트/bootst rap/LocationBsSelect.vue 모듈 빌드 실패:구문 오류:예기치 않은 토큰(28:4)

내 발걸음이 잘못된 것 같아

어떻게 하면 해결할 수 있을까요?

오류 처리

속성을 0에 바인딩하고 있습니다. :required에

<select class="form-control" v-model="selected" :required @change="changeLocation">

그리고.:selected에

<option :selected>Choose Province</option>

이렇게 코드를 설정하면 오류가 사라집니다.

<template>
  <select class="form-control" v-model="selected" :required @change="changeLocation">
    <option>Choose Province</option>
    <option v-for="option in options" v-bind:value="option.id" >{{ option.name }}</option>
 </select>
</template>

선택한 태그를 기본값으로 가져오는 중

1. 이 시점에서 필요한 것은,data라고 하는 속성selectedv-model이 작동하도록 합니다.그렇게,

   {
     data () {
       return {
         selected: "Choose Province"
       }
     }
   }
   

2. 작업이 너무 많은 것 같으면 다음과 같이 할 수도 있습니다.

   <template>
     <select class="form-control" :required="true" @change="changeLocation">
      <option :selected="true">Choose Province</option>
      <option v-for="option in options" v-bind:value="option.id" >{{ option.name }}</option>
     </select>
   </template>
   

---

어떤 방법을 사용해야 합니까?

1. 를 사용할 수 있습니다.v-model접근법(기본값이 일부 데이터 속성에 따라 달라지는 경우)을 클릭합니다.

2. 기본 선택된 값이 첫 번째 값이 될 경우 두 번째 방법을 사용할 수 있습니다.option.

3. 이를 통해 프로그래밍 방식으로 처리할 수도 있습니다.

   <select class="form-control" :required="true">
     <option 
      v-for="option in options" 
      v-bind:value="option.id"
      :selected="option == '<the default value you want>'"
     >{{ option }}</option>
   </select>
   

가장 간단한 답은 선택한 옵션을 다음과 같이 설정하는 것입니다.true또는false.

<option :selected="selectedDay === 1" value="1">1</option>

데이터 오브젝트는 다음과 같습니다.

data() {
    return {
        selectedDay: '1',
        // [1, 2, 3, ..., 31]
        days: Array.from({ length: 31 }, (v, i) => i).slice(1)
    }
}

다음 예제에서는 선택한 월일을 설정합니다.

<select v-model="selectedDay" style="width:10%;">
    <option v-for="day in days" :selected="selectedDay === day">{{ day }}</option>
</select>

데이터 세트:

{
    data() {
        selectedDay: 1,
        // [1, 2, 3, ..., 31]
        days: Array.from({ length: 31 }, (v, i) => i).slice(1)
    },
    mounted () {
        let selectedDay = new Date();
        this.selectedDay = selectedDay.getDate(); // Sets selectedDay to the today's number of the month
    }
}

<select v-model="challan.warehouse_id">
<option value="">Select Warehouse</option>
<option v-for="warehouse in warehouses" v-bind:value="warehouse.id"  >
   {{ warehouse.name }}
</option>

여기서 "도전"입니다.warehouse_id는 다음과 같은 "challan" 객체에서 가져옵니다.

editChallan: function() {
    let that = this;
    axios.post('/api/challan_list/get_challan_data', {
    challan_id: that.challan_id
 })
 .then(function (response) {
    that.challan = response.data;
 })
 .catch(function (error) {
    that.errors = error;
  }); 
 }

선택한 필수 특성에서 v-bind(:)를 제거하면 됩니다.이렇게 :-

<template>
    <select class="form-control" v-model="selected" required @change="changeLocation">
        <option selected>Choose Province</option>
        <option v-for="option in options" v-bind:value="option.id" >{{ option.name }}</option>
    </select>
</template>

이러한 Atribut을 통해 vue 인스턴스에 어떤 것도 바인딩하지 않기 때문에 오류가 발생합니다.

또 다른 방법은, 제가 종종 더 믿을 만하다고 생각하는 것은, 당신이 지시문을 추가해 줄 수 있다는 것입니다.app.js또는 VueJ를 시작하는 곳(예:

Vue.directive('attr', (el, binding) => {
  if (binding.value === true) binding.value = ''
  if (binding.value === '' || binding.value) {
    el.setAttribute(binding.arg, binding.value)
  }
})

그 후, 이용하실 수 있습니다.v-attrAtribute를 설정합니다.

<option value="Western Australia" v-attr:selected="form.state == 'Western Australia'">Western Australia</option>

반응형 멀티 셀렉트의 내 코드

data() {
    return {
        article: {title: 'aaaaa', 'categoriesIds': [1,3], ...},
        selectCategories: {1: 'xxx', 2: 'www', 3: 'yyy', 4: 'zzz'},
    }
},

템플릿

<div class="form-group">
     <label for="content">Categories</label>
     <select name="categories" 
         v-model="article.categoriesIds" 
         id="categories" 
         multiple 
         class="form-control col-md-5" 
         size="6">
         <option v-for="(category, key) in selectCategories" 
             :key="key" 
             v-bind:value="key">{{category}}</option>
     </select>
</div>

선택한 항목은 article.categoriesIds 배열에 바인딩됩니다.

언급URL : https://stackoverflow.com/questions/43839066/how-can-i-set-selected-option-selected-in-vue-js-2