'filterBy`를 동적 선택 목록과 함께 사용

vue.js을 사용하여 선택 항목의 긴 목록이있는 양식을 작성 중입니다. 여기에 문서화 된 동적 선택 목록을 사용하고 있습니다 : http://012.vuejs.org/guide/forms.html#Dynamic_Select_Options 'filterBy`를 동적 선택 목록과 함께 사용

그러나 사용자가 filterBy 지시문을 사용하여이 목록을 신속하게 필터링 할 수있게하고 싶습니다. 이 두 가지를 어떻게 조합 할 수 있는지는 알 수 없습니다. 동적 목록을 필터링 할 수 있습니까? 또는 에 대해서만 filterBy을 사용할 수 있습니까?

출처

2016-07-07 user101289

0.12를 사용하여 붙어 있습니까? 1.0 가이드에서 동적 선택 목록의 예제는'v-for'를 사용합니다. http://vuejs.org/guide/forms.html#Select – asemahle

@ asemahle-- 저는'v-for'를 사용할 수 있지만 사용하고 싶습니다. 동적 선택 그래서'optgroups'을 만들 수 있습니다. 질문은'filter-vy'를'v-for' 대신 동적 선택으로 사용할 수 있는지의 문제입니다. – user101289

0.12에서 매개 변수 param을 사용하여 필터를 사용할 수 있습니다. docs은 v-for를 필터링하는 것과 동일한 구문을 보여줍니다.

여기 filterBy를 도시 한 예이다 (버젼 0.12.16을 사용)

var app = new Vue({ 
 
    el: '#app', 
 
    
 
    data: { 
 
    selected: '', 
 
    options: [ 
 
     { text: '1', value: 1, show: true }, 
 
     { text: '2', value: 2, show: false }, 
 
     { text: '3', value: 3, show: true }, 
 
     { text: '4', value: 4, show: true }, 
 
     { text: '5', value: 5, show: false }, 
 
    ] 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.js"></script> 
 
<div id="app"> 
 
    Filter by 'show' <br> 
 
    <select v-model="selected" options="options | filterBy true in 'show'"></select> 
 
</div>

참고 : <select v-model>위한 options PARAM은 deprecated in 1.0을하고있다. 1.0에서는 <select> 내에 v-for을 직접 사용할 수 있습니다. v-for은 optgroup을 사용하도록 중첩 될 수 있습니다.

출처

2016-07-07 21:14:25 asemahle

이 바이올렛을 확인하십시오 https://jsfiddle.net/tronsfey/4zz6zrxv/5/.

<div id="app"> 
    <input type="text" v-model="keyword"> 
    <select name="test" id="test"> 
    <optgroup v-for="group in list | myfilter keyword" label="{{group.label}}"> 
     <option value="{{item.price}}" v-for="item in group.data">{{item.text}}</option> 
    </optgroup> 
    </select> 
</div> 




<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script> 
    new Vue({ 
     el: '#app', 
     data: function() { 
      return { 
        keyword : '', 
       list: [ 
        { 
        label:'A', 
        data:[ 
         {price: 3, text: 'aa'}, 
         {price: 2, text: 'bb'} 
        ] 
        }, 
        { 
        label:'B', 
        data:[ 
         {price: 5, text: 'cc'}, 
         {price: 6, text: 'dd'} 
        ] 
        } 
       ] 
      } 
     }, 
     filters : { 
      myfilter : function(value,keyword){ 
      return (!keyword || keyword === 'aaa') ? value : ''; 
      } 

     } 
    })

당신은 optgroups를 만든 다음 옵션 데이터를 필터링 (바이올린처럼) 대신 filterBy하거나 사용자 정의 필터를 사용하는 절-에 사용할 수 있습니다.

희망이 있으면 도움이 될 것입니다.

출처

2016-07-13 06:34:23

'filterBy`를 동적 선택 목록과 함께 사용

답변

관련 문제