Question

如何将我的Vue组件中的值searchString绑定到此组件使用的html模板中的item值？我想将此值发送到我在Ajax调用中调用的方法。

Vue的：

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}}</button></li>
</ul>

Answer 1

使用vue，您可以将点击事件中的参数传递给dbSearch_method，如：

<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>

在你的javascript中：

dbSearch_method: function (item) {

这样，搜索功能中就会有{{item}}对象，您可以访问它的属性。

您可以查看here。希望它有所帮助！

如何将组件数据绑定到prop的值

1 个答案: