Vue에서 선택한 옵션을 조건부로 설정하는 방법

Vue에서 선택한 옵션을 조건부로 설정하는 방법

선택 상자의 선택된 값을 미리 설정할 수 있습니까?

Vue(v2)를 사용하여 Vue 템플릿 내에 이와 같은 선택 상자를 만들어 보았습니다.

<select v-model="selectedFlavor">
   <option v-for="flavor in flavors" 
           :value="flavor"
           :selected="selectedFlavor == flavor">{{ flavor }}</option>
</select>

그리고 다음과 같은 컴포넌트가 있습니다.

Vue.component('flavor-pane', {
      ...
      data: function() {
          selectedFlavor: 'strawberry',
          flavors: ['blueberry', 'lime', 'strawberry'],
      });
}

기본적으로 단순한 배열을 루프하여 선택 상자에 여러 옵션을 만들고 선택 상자의 값을 기존 값으로 설정해야 합니다.이거 해도 돼요?

템플릿/컴포넌트는 정상적으로 렌더링되지만selected조건이 충족되고 선택 상자에 값이 선택되지 않은 경우에도 속성이 HTML에 나타나지 않는 것 같습니다.

네, 가능합니다.이 예시는 https://jsfiddle.net/Luvq9n4r/2/에서 작성했습니다.선택한 값을 변경하려면 모델을 설정하십시오.만약 그게 필요 없다면, 제발, 바이올린도 만들어 주세요.

감사합니다.

new Vue({
  el: '#app',
  data: function() {
    return {
      selectedFlavor: 'lime',
      flavors: ['blueberry', 'lime', 'strawberry']
    }
  },
  methods: {
    change: function() {
      this.selectedFlavor = 'strawberry';
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="app">
  <button @click="change()">Set Strawberry</button>
  <select v-model="selectedFlavor">
    <option v-for="flavor in flavors" :value="flavor">{{flavor}}</option>
  </select>
</div>

올바른 방향으로 나아가고 있습니다.v-model그리고.selectedFlavor선택 사항으로요.이렇게 하면 선택 상자의 값이 다음 값에 바인딩됩니다.selectedFlavor의 값을 변경할 때selectedFlavor선택한 요소의 값을 변경합니다.이것은 양쪽에서 동작합니다.즉, 선택 박스를 변경하면 다음 값도 변경됩니다.selectedFlavor(즉, 양방향 데이터 바인딩, 반응성).

선택한 요소의 값을 변경하면 다음 값이 있는 옵션 요소도 변경됩니다.selected기여하다.이 v-model 데이터 바인딩을 사용하여 목표를 달성할 수 있지만 이는 기능적으로 동일한 결과일 뿐입니다.사용 사례는 다를 수 있습니다.

이 방법을 사용하여 선택 상자의 값을 변경할 수 있는 경우 초기 값을 설정합니다.selectedFlavor에서data오브젝트는 select 박스의 디폴트값을 설정하는 목표를 달성합니다.따라서 선택한 Atribute를 가진 옵션요소를 지정합니다.

직접 바인딩하는 데이터 모델의 값을 변경하거나 Vuex와 같은 상태 관리를 통해(가능하면) 변경함으로써 선택 상자의 값을 변경할 수 있습니다.상태 관리는 다른 이벤트, 데이터 소스, API, 웹 소켓 등의 동적 데이터를 기반으로 선택 상태를 관리하는 데 대한 더 큰 질문에 답합니다.

값을 직접 수정하고 있습니다.selectedFlavor아래는 기본적인 개념을 강조하기 위한 것일 뿐이지만, 상태 관리 패러다임에서는 이것이 어떻게 보일지 암시하려고 노력했습니다.

<select v-model="selectedFlavor">
   <option v-for="flavor in flavors" 
           :value="flavor"
           @change="onChangeFlavour"
           >{{ flavor }}</option>
</select>

new Vue({
  el: '#app',
  data() {
    return {
      selectedFlavor: 'lime', // Default value is set here
      flavors: ['blueberry', 'lime', 'strawberry']
    }
  },
  methods: {
    onChangeFlavour(event) {
      // do what you want with the new value when the select box is changed
      console.log(event.srcElement.value);
      // OR preferably
      console.log(this.selectedFlavor); // because binding
    },
    setFlavour(newFlavour){
      // change the value
      this.selectedFlavor = newFlavour;
    }
  }
});

vue에서 jquery를 사용하여 온라인으로 옵션을 선택할 수 있습니다.

1. jquery를 포함하다

window.$ = require('jquery');
window.JQuery = require('jquery');

PHP 2. HTML/PHP 데 html html html html
, 그럼 여기에다가 더해져요.data-selectedselect tag

<select v-model="company" name="company" data-selected="{{ $document->company_id }}">
   <option value="{{ $company->id }}">{{ $company->name }}</option>
</select>

3. Vue 업데이트

const app = new Vue({
   el: '#app',
   data: {
      company: '',
      companies: '',
   }
   methods: {
      getCompanies: function () {
         axios.post('/company/getdata').then(function (response) {
            app.companies = [];
            app.companies = response.data;

            // Check if .editCompany is present. 
            if ($('.editCompany').length > 0) {
               app.company = $('.editCompany').data('selected');
            }
         }).catch(error => console.log(error));
      },
   },
   created: function () {
      this.getCompanies();
   }
});

언급URL : https://stackoverflow.com/questions/48408158/how-to-conditionally-set-selected-option-in-vue