Vuejs如何从jquery传递数据道具答案

【问题标题】：Vuejs how to pass data prop from jqueryVuejs如何从jquery传递数据道具
【发布时间】：2016-05-11 23:05:01
【问题描述】：

我在我的项目中使用 Laravel、vue 和 js

我想从

获取在我的班级 vueAddReview 中传递的数据

<div id="app-vue">
    <add-review class="vueAddReview"></add-review>
</div>

我正在使用 jQuery 在vueAddReview 类中设置数据

    $(document).on('click', '.writeReview', function(e) {
    e.preventDefault();

    var addReviewModal = $('.addReviewModal');
    addReviewModal.modal('show');

    var listingId = $('.writeReview').data('listing-id');

    $('.vueAddReview').data('listing-id', listingId);
});

我的问题是我不知道如何将$('.vueAddReview').data('listing-id') 作为道具传递给 vue

【问题讨论】：

标签： jquery vue.js

【解决方案1】：

我不确定它是否有效，您可以在根 Vue 组件（此处为 app-vue ）中初始化数据并将其作为道具传递

const app-vue = new Vue({
    el: '#app-vue',
    data: () => {
        foobar: $('.vueAddReview').data('listing-id')
    }
});

然后你可以将它作为道具传递给他的子组件

<add-review :listing-id="foobar"></add-review>

(恕我直言，用 DOM 元素数据初始化 Vue 组件有点尴尬。DOM 不应该是模型的真实来源。有没有办法不使用 jQuery 属性来初始化 Vue组件？）

【讨论】：