Question

让我们以实际的例子开始，我正在工作。我的项目是在laravel 5.3。

我有2个文件。 brand_details.blade.php 和 brand_detail.js 文件，以获取特定品牌的所有详细信息。我成功地获得了所有细节。

现在品牌有很多代价：品牌abc有3种不同的价格100,600,1500等等。而且我得到一串价格，但我希望它作为一个数组，所以我可以在价格上使用 v-for 并以选择方式显示。

brand_detail.blade.php文件

<div id="container_detail">
<brand-detail></brand-detail>
</div>
<template id="brand-detail-template">
   <div class="content">
      <h1> @{{d.brand_name}} </h1>
      <img :src="d.image" class="">

    // here I have print my price and it's in string format 
    @{{ d.price }} // output:  100,600,1500

// if I apply filter for string to array it's give me an array
   @{{ d.price | strtoarr}} // output: [100,600,1500] but how to pass
   this array to select option tag ? 

    //but I want price is an array formate so I tried below trick but didn't work. here I apply **strtoarr** filter on string but it's give me an error that **vue.js:525 [Vue warn]: Property or method "strtoarr" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. 
(found in component <brand-detail>)**

    <select name="price">
       <option v-for="price in (d.price | strtoarr)" v-text="price"></option>
    <select>
   </div>

</template>

brand_detail.js

Vue.component('brand-detail', {

template: '#brand-detail-template',

data: function(){

    return {

        detail: []

    }

},

created: function(){
    //var slug = this.$route.params.slug;
    var slug = window.location.pathname.split("/").pop();
    var url = window.location.protocol + "//" + window.location.host + "/";

    var api_url = url + 'gift_india/brand_detail/' + slug;
    var that = this
    axios.get(api_url)
        .then(function (response) {
            //console.log(response.data);
            that.detail = response.data;

        })
        .catch(function (error) {
            console.log(error.data);
        });

},

filters: {
    removehtml: function (value) {
        if (!value) return ''
        var myContent = value;
        return myContent.replace(/(<([^>]+)>)/ig,"");
    },
    strtoarr: function (value) {

        var array = JSON.parse("[" + value + "]");
        return array;
    }
}
});

new Vue({

el: '#container_detail'

})

如何完成此任务？

如果我将Vue js值存储到某个变量，那么我可以在 v-for 中使用该变量，但这只是我的想法并不确定。

Answer 1

这样做的一种方法是使用计算属性。

例如。你的组件中有这样的东西：

computed: {
    prices: function () {
        return this.detail.price.split(',');
    }
}

然后在你的模板中出现类似的内容：

<select name="price">
    <option v-for="price in prices" v-text="price"></option>
<select>

Vue js - 如何将Vue js值存储到laravel刀片模板中的变量？

1 个答案: