コンポーネントのデータを小道具の値にバインドする方法

Question

私のVueコンポーネントの値searchStringを、このコンポーネントが使用するhtmlテンプレートのitemの値にバインドするにはどうすればよいですか？私はこの値をAjaxコールで呼び出す方法に送信したいと思います。

ヴュ：

Vue.component('user-container-component', { 
    props: { 
     prop: null 
    }, 
    template: '#user-container-template', 
    data: function() { 
     return { 
      open: false, 
      searchString: '' 
     } 
    }, 
    methods: { 
     toggle: function() { 
      this.open = !this.open; 
     }, 
     dbSearch_method: function() { 
      var self = this; 
      $.ajax({ 
       url: 'Home/LocalSearch', 
       type: 'GET', 
       data: {id: self.searchString}, 
       success: function (response) { 
        self.$emit('search-results-fetched', response); 
       }, 
       error: function() { 
        alert('error'); 
       } 
      }); 
     } 
    } 
}) 

HTML：

<ul class="no-bullets" v-show="open" v-for="item in prop"> 
    <li><button class="btn btn-link bold" v-on:click="dbSearch_method(item)">{{item}}</button></li> 
</ul> 

そして、あなたの中：

<ul class="no-bullets" v-show="open" v-for="item in prop"> 
    <li><button class="btn btn-link bold" v-on:click="dbSearch_method">{{item}}</button></li> 
</ul> 

Answer 1

VUEであなたは次のようにあなたのdbSearch_methodへのクリックイベントにパラメータを渡すことができますjavascript：

dbSearch_method: function (item) { 

このようにして、検索機能に{{item}}オブジェクトがあり、プロパティにアクセスできます。

hereをご覧ください。それが役に立てば幸い！