首页 文章

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

提问于
浏览
0

让我们从我正在工作的实例开始 . 我的项目是laravel 5.3 .

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

现在品牌有很多价格为ex:品牌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 中使用该变量,但这只是我的想法不确定 .

1 回答

  • 0

    一种方法是使用计算属性 .

    例如 . 你的组件中有类似的东西:

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

    然后在你的模板中这样的东西:

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

相关问题