Vue.js组件无法从变量获取值

Question

我是Vue.js的新手，在我的laravel应用中，我正在使用此组件https://github.com/saintplay/vue-swatches正常运行，问题是我有一个编辑表单，我想从中传递值（十六进制中的颜色）选定的组件变量，例如value="{{$var->hex_color}}。

这是我的app.js

const d_app = new Vue({
 el:'#d_app',
 components: { 
  Swatches,
 },
 data:{
  color:'#ffffff',
 },
});

这是我的表格

<swatches v-model="color" colors="text-advanced" value="{{$var->hex_color}}"></swatches>

加载页面时，它显示的是默认颜色#ffffff，而不是$var->hex_color。

Answer 1

要将值从Laravel传递到Vue组件，请先对其进行编码。

Laravel：

<swatches :value="{{ json_encode($var->hex_color) }}"></swatches>

关于属性名称的通知“：” 。 现在，让我们用Vue接受它。

...
export default {
   props: ['value']
}
...

现在，您应该能够打印prop值了：

<p>{{ value }}</p>

console.log(this.value) // Your hexa value passed from Laravel.

Answer 2

您已指示v模型，这已经意味着您正在向其传递“值”，并且在更改时它会发出“输入”事件

<swatches v-model="color" colors="text-advanced" value="{{$var->hex_color}}"></swatches>

我想这就是默认#ffffff颜色的来源。

我认为，如果您从此处删除v-model并只留下：value，像这样：

<swatches colors="text-advanced" :value="{{$var->hex_color}}"></swatches>

可能有效。你尝试过吗？

或者您可以直接将颜色传递给v模型：

<swatches colors="text-advanced" v-model="{{$var->hex_color}}"></swatches>