Question

我在项目中使用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

Answer 1

我不确定它是否有效，您可以初始化根Vue组件中的数据（此处为const app-vue = new Vue({ el: '#app-vue', data: () => { foobar: $('.vueAddReview').data('listing-id') } });）并将其作为道具传递

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

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

id   End_dt    End_dt2  
1     1/1/15  

Where End_dt <> End_dt2

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

Vuejs如何从jquery传递数据prop

1 个答案: