옵션 루프에서 선택한 개체 가져오기

옵션 루프에서 선택한 개체 가져오기

Vue select-element 내의 객체 어레이를 바인드하는 방법을 찾고 있습니다.그 예는 다음과 같습니다.

data: {
  ideas: [
    { id: 1, code: "01A", text: "option 1", props: [] }, 
    { id: 2, code: "02A", text: "option 2 , props: [{ details: "something" }]}
  ]},
  currentForm: {
    something: "foo",
    else: "bar",
    ideaCode: "01A",
    text: "option 1"
  }
];

그리고 HTML로...

<select v-model="currentForm.ideaCode" @change="setCodeAndLabelForForm(???)">
  <option v-for="i in ideas" value="i">{{ i.text }}<option>
</select>

기본적으로 사용자가 선택한 오브젝트를 추적하고, 자신의 변경 이벤트를 트리거하며, 다른 오브젝트의 키 하나로 바인딩을 할 수 있어야 합니다.선택한 값/참조 키는 사용자가 선택한 옵션/개체와 구분해야 합니다.참고: currentForm은 옵션과 같은 객체 유형이 아닙니다! 사용자 선택을 위해 변경 이벤트를 트리거하여 옵션으로 전송하려는 속성 중 일부만 포함되어 있습니다.

문제는 함수에 대해 현재 선택된 값을 전달하는 방법 또는 다음과 같은 내용을 작성하는 방법을 파악하지 못했다는 것입니다.

<select v-model="selectedIdea" @change="setCodeAndLabelForForm" :track-by="currentForm.ideaCode">
  <option v-for="i in ideas" value="i">{{ i.text }}<option>
</select>

가능한 (실행 중인) 접근법 중 하나는 다음과 같습니다.

<select v-model="currentForm.ideaCode" @change="setCodeAndLabelForForm">
  <option v-for="i in ideas" value="i.ideaCode">{{ i.text }}<option>
</select>

setCodeAndLabelForForm: function() {
    var me = this;
    this.ideas.forEach(function(i) {
        if(i.ideaCode == me.currentForm.ideaCode) {
            me.currentForm.ideaCode = i.selectedIdea.ideaCode;
            me.currentForm.text = i.text;
            ... do stuff & run callbacks ...
        }
    });
}

...하지만 끔찍해 보입니다.더 좋은 생각 있어요?

다음과 같이 구현할 수 있습니다.

빈 개체 데이터를 생성하여 선택한 값을 추적합니다.

currentForm: {}

모델에서 currentForm을 보고 선택한 개체를 전달합니다.

<select v-model="currentForm" @change="setCodeAndLabelForForm(currentForm)">

해 주세요.option (에서는 잘 , 요. : (이 스텝에서는 잘 하고 있었는데)i로로 합니다.idea루프인덱스이기

<option v-for="idea in ideas" :value="idea">{{ idea.text }}<option>

메서드를 적용합니다.

setCodeAndLabelForForm(selected) {
  // Now, you have the user selected object
}

조금 더 나은 해결 방법: v-for의 인덱스 사용

<select v-model="selIdeaIndex" @change="setCodeAndLabelForForm">
  <option v-for="(i,idx) in ideas" value="idx">{{ i.text }}<option>
</select>

js의 경우:

data: {
  selIdeaIndex:null,
  ideas: [
    { id: 1, code: "01A", text: "option 1", props: [] }, 
    { id: 2, code: "02A", text: "option 2 , props: [{ details: "something" }]}
  ]
},
methods:{
    setCodeAndLabelForForm: function() {
        var selIdea = this.ideas[this.selIdeaIndex];
        //Do whatever you wanna do with this selIdea.
    }
}

이것이 최선의 해결책인지는 모르겠지만 다음과 같은 계산 속성을 사용하여 이 문제를 해결합니다.

JavaScript 파일(ES6)에서 다음을 수행합니다.

data () {
    return {
        options: [
            { id: 1, text: "option 1" },
            { id: 2, text: "option 2" }
        ],
        selectedOptionId: 1
    }
},
computed: {
    selectedOption () {
        return _.find(this.options, (option) => {
            return option.id === this.selectedOptionId
        });
    }
}

HTML 파일:

<select v-model="selectedOptionId">
  <option v-for="option in options" :value="option.id" :key="option.id">{{ option.text }}<option>
</select>

'_' 기호는 Lodash라는 일반적인 JavaScript 라이브러리이며 사용을 강력히 권장합니다.귀중한 시간을 절약할 수 있습니다.

option는 그 s에서 입니다.v-for="i in ideas" <option>는 인 will will indexes will will will will indexes indexes indexes 。item인덱스를 클릭합니다.

★★★★★★★★★★★★★★★★★▼<select>.selectedIndex선택한 인덱스가 됩니다.this.item.

new Vue({
  el: '#app',
  data: {
    ideas: [
      { id: 1, code: "01A", text: "option 1", props: [] }, 
      { id: 2, code: "02A", text: "option 2" , props: [{ details: "something" }]}
    ],
    currentForm: {ideaCode: "01A", text: "option 1"}
  },
  methods: {
    setCodeAndLabelForForm: function(selectedIndex) {
      var selectedIdea = this.ideas[selectedIndex];
      this.currentForm = {ideaCode: selectedIdea.code, text: selectedIdea.text};
    }
  }
})

<script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>

<div id="app">
  <select v-model="currentForm.ideaCode" @change="setCodeAndLabelForForm($event.target.selectedIndex)">
    <option v-for="i in ideas" :value="i.code">{{ i.text }}</option>
  </select>
  <br> currentForm: {{ currentForm }}
</div>

: ★★★★★★★★★★★★★★★★★★★★★★★★★:@change="setCodeAndLabelForForm($event.target.selectedIndex)" 및setCodeAndLabelForForm★★★★★★ 。

겸손한 방법은 사용하는 것이다.$ref.

하다, 하다, 하다, 하다, 하다, 하다, 하다, 이런 해결책이 요.$ref ★★★★★★★★★★★★★★★★★」@change.

Vue.js는 선택한 옵션의 원시 개체를 가져옵니다.

이 질문을 한 지 오래되었고, 이 상황에 대한 좋은 제안이 있었습니다.여기에 제시된 정확한 비즈니스 케이스는 기억나지 않지만, 한눈에 봐도 올바른 선택을 설정/초기화하는 방법을 알 수 없었던 것 같습니다.@change 이벤트만 처리하는 것은 아이들의 놀이이기 때문입니다.이것은 객체 기반 옵션 목록과 하나의 값을 조합하는 것이 더 어렵기 때문입니다.내가 가장 찾고 있었던 건 Angular라는 거였어JS 에는 (track-by-property, 임의의 값을 선택한 옵션과 대조)가 있었습니다.

개인적으로는 UI 로직을 강제로 섞지 않고 분리할 수 있습니다.가장 실행 가능한 접근법은 옵션 목록과 선택한 옵션을 하나의 논리 영역(데이터: {list: [...options], selectedIdea: 개체 }) 및 "currentForm" 개체를 선택 항목에서 분리합니다.이 문제를 해결합시다.

• selectedIdea는 currentForm-object로의 변경을 트리거해야 합니다.어떤 하이브리드 모델도 아닙니다.그냥 단순한 객체입니다.순수하고 심플하게 선택할 수 있습니다.
• ...그리고 다시 한 번:selectedValue === 옵션 중 하나일 때마다 선택 선택 항목이 자동으로 오른쪽 선택으로 설정됩니다.
• "currentForm" 개체에는 selectedIdea 설정에 사용할 수 있는 속성이 있습니다.이 경우 "idea Code"입니다.이 ideaCode는 자동으로 쌍을 이루지 않으며 이러한 컴포넌트 로직은 규칙을 나타내야 합니다.이것은 "ideaCode"와 일치하는 올바른 옵션을 선택하는 트리거가 됩니다.
• 단, selectedIdea와 currentForm-object는 2개의 다른 논리요소입니다.원한다면 다른 구성요소로 분리할 수도 있고 어떤 경우에는 분리하는 것이 정말 좋습니다.

따라서 이러한 문장으로 인해 선택한 v-model을 원하는 대로 변경할 수 있습니다.선택한 개체 중 하나(v-model="currentForm.ideaCode"를 v-model="selectedIdea" 등으로 변경)그런 다음 해당 selectedIdea에 watcher를 추가하고 거기에서 currentForm-object를 변경합니다.

currentForm.ideaCode ? create-method에서 다음 중 하나를 수행합니다.

• 사용 가능한 옵션 목록을 반복합니다.currentForm.ideaCode == option.code = > this 옵션을 찾을 경우.selectedIdea = 옵션
• ... 또는 ecmascript find-discript를 사용하여 동일한 작업을 수행합니다.
• ...또는 언더스코어/로더쉬 검색 기능을 사용하여 동일한 작업을 수행합니다.

또 다른 방법은 아우구스토 에스코바르가 제안한 대로 계산된 가치를 이용하는 겁니다또한 fengzhang이 제안한 바와 같이 $ref는 작동하지만, 이 접근법에서는 (초기값을 가진 에디터를 로드할 때) 나중에 올바른 옵션을 초기화하기 위한 솔루션이 여전히 필요합니다.Bhojendra Rauniyar씨에게도 감사했습니다.-당신이 줄곧 옳았습니다만, 저는 초기 선택을 되돌릴 방법을 찾을 수 없었기 때문에 답을 이해할 수 없었습니다.

한 해 동안 제안해 주셔서 감사합니다!

언급URL : https://stackoverflow.com/questions/49025720/get-selected-object-from-options-loop