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

【问题标题】：Vue js - How to store Vue js value to variable in laravel blade template?Vue js - 如何将 Vue js 值存储到 laravel 刀片模板中的变量？
【发布时间】：2017-01-17 05:38:29
【问题描述】：

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

我有 2 个文件。 brand_details.blade.php 和 brand_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 中使用该变量，但这只是我的想法并不确定。

【问题讨论】：

不确定你在问什么。你在做什么有什么问题？它不工作吗？如果没有怎么办？
@CUGreen 我从 Vue js 得到一个 string 的价格，我希望它从 string 转换为 array 并希望执行 v-for 在那个价格上。
你是说你的过滤器不工作？

标签： vue.js laravel-5.3 vuejs2

【解决方案1】：

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

例如。在你的组件中是这样的：

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

然后在您的模板中添加这样的内容：

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

【讨论】：