Vue js - laravelブレードテンプレートの変数にVue js値を保存するにはどうすればいいですか？

Question

私が働いているというライブサンプルから始めましょう。私のプロジェクトはlaravel 5.3です。

私は2つのファイルを持っています。 brand_details.blade.phpおよびbrand_detail.js特定のブランドのすべての詳細を取得するファイル。私はすべての詳細を得るために成功を収めている。

ブランドはex：brand abcには3種類の価格100,600,1500などの多くの価格があります。私は価格の文字列を取得していますが、それは配列として私はのv -の価格と選択の方法として表示するために使用することができますしたいと思います。

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-に使用できますが、これはわかりません。

Answer 1

これを行う1つの方法は、計算されたプロパティを使用することです。

例えば、あなたのコンポーネントでこのような何か：

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

次に、あなたのテンプレートではこのような何か：

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