선택한 Vue Js 드롭다운에서 값 가져오기

선택한 Vue Js 드롭다운에서 값 가져오기

문제가 있습니다. 바인딩 vue js 형식에서 값을 얻는 방법을 정말 헷갈렸습니다.https://vuejs.org/v2/guide/forms.html#Select에 접속했습니다.그러나 --> 속성 또는 메서드가 인스턴스에서 정의되지 않고 렌더링 중에 참조된다는 등의 오류가 항상 오류가 발생합니다. 데이터 옵션에서 비활성 데이터 속성을 선언하십시오.내 코드에 무슨 문제가 있나요?

제 코드는 다음과 같습니다.

data: function() {
  return {
    data: {
      options: {},
      selected: ''
    }
  };
},
methods: {
  Search: function() {
    var vm = this;

    var types = [
      {
        "id": "id",
        "value": "ID"
      },
      {
        "id": "title",
        "value": "Title"
      },
      {
        "id": "category",
        "value": "Category"
      },
      {
        "id": "username",
        "value": "Nama User"
      }
    ];

    vm.data.options = types;

    console.log(vm.data.selected);
  }
}

다음은 저의 html 코드입니다.

<select v-model="selected" class="form-control sl">
    <option v-for="option in data.options" v-bind:value="option.id">
        {{ option.value }}
    </option>
</select>

@kevlai22는 이미 실행 가능한 코드 스니펫을 제공했습니다.왜 경고 메시지를 받았는지 알려드리겠습니다속성 또는 메서드 "selected"는 인스턴스에서 정의되지 않고 렌더링 중에 참조됩니다. 데이터 옵션에서 비활성 데이터 속성을 선언하십시오.
이는 단순히 데이터 개체를 중첩된 데이터 개체와 함께 반환하기 때문입니다.v-model="selected"동작하지 않지만v-model="data.selected"네스트된 오브젝트를 반환하지 않고 이렇게 코드를 사용합니다.

data: function() {
  return {
      options: [],
      selected: ''
  };
},

동작 데모를 확인합니다.

그methods이 방법으로 사용해서는 안 되며, 실제로 이 정보를 얻기 위해 어떤 방법도 필요하지 않습니다.value다음은 작업 예를 제시하겠습니다.

const app = new Vue({
  el: '#app',
  data: {
    selectedOption: undefined,
    chosenColor: 'transparent',
    colorMappings: {
      ID: 'red',
      Title: 'green',
      Category: 'blue',
      'Nama User': 'orange'
    },
    widthMappings: {
      ID: '2px',
      Title: '4px',
      Category: '6px',
      'Nama User': '8px'
    },
    types: [
      {
        "id": "id",
        "value": "ID"
      },
      {
        "id": "title",
        "value": "Title"
      },
      {
        "id": "category",
        "value": "Category"
      },
      {
        "id": "username",
        "value": "Nama User"
      }
    ]
  },
  watch: {
    selectedOption(newVal) {
       this.chosenColor = this.colorMappings[newVal]
    }
  },
  computed: {
    chosenWidth() {
      return this.widthMappings[this.selectedOption] || '1px'
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app">
  <select v-model="selectedOption">
    <option disabled value="">Please select one</option>
    <option v-for="type in types" v-bind:value="type.value">{{type.value}}</option>
  </select>
  <span v-bind:style="{ 'background-color': chosenColor, 'border': 'solid ' + chosenWidth + ' black' }">Selected: {{ selectedOption }}</span>
</div>

죄송합니다, 글을 조금 잘못 읽었으므로 데이터 부분은 무시하십시오.데이터 내에 데이터 개체를 생성했는지 몰랐습니다.다음은 고객님의 코드와 거의 일치해야 하는 샘플입니다.문제는 버튼을 클릭하면 검색 드롭다운에 새로운 요소가 추가되지만 아직 아무것도 선택하지 않았기 때문에 콘솔 출력은 빈 문자열이 된다는 것입니다.그런 다음 무언가를 선택하고 버튼을 다시 클릭하면 값이 표시됩니다.

Vue.component('select-component', {
	template: '<div>\
  <select v-model="data.selected" class="form-control sl">\
    <option v-for="option in data.options" v-bind:value="option.id">\
      {{ option.value }}\
    </option>\
  </select>\
  <button v-on:click="Search">Populate List</button>\
</div>',
  data: function() {
    return {
      data: {
        options: {},
        selected: ''
      }
    };
  },
  methods: {
    Search: function() {
      var vm = this;

      var types = [
        {
          "id": "id",
          "value": "ID"
        },
        {
          "id": "title",
          "value": "Title"
        },
        {
          "id": "category",
          "value": "Category"
        },
        {
          "id": "username",
          "value": "Nama User"
        }
      ];

      vm.data.options = types;
			
      console.log(vm.data.selected);
    }
  }
});

var vm = new Vue({
	el: '#app'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <select-component></select-component>
</div>

메모지만, 저도 바뀌었어요.v-model="selected"로.v-model="data.selected"선택한 변수는 이 범위에서 사용할 수 있는 유일한 변수인 데이터 객체의 속성이기 때문입니다.

<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>
<span>Selected: {{ selected }}</span>
new Vue({
  el: '...',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})

언급URL : https://stackoverflow.com/questions/45791155/get-value-from-selected-dropdown-vue-js