刀片中的 Vue 组件答案

【问题标题】：Vue component in blade刀片中的 Vue 组件
【发布时间】：2017-08-30 07:33:46
【问题描述】：

我正在尝试在我的 Blade 视图中使用 this。我在 JS 中有.vue 文件和以下代码：

import Multiselect from 'vue-multiselect'

export default {
  components: {
    Multiselect
  },
  data () {
    return {
      value: '',
      options: ['Select option', 'options', 'selected', 'mulitple', 'label', 'searchable', 'clearOnSelect', 'hideSelected', 'maxHeight', 'allowEmpty', 'showLabels', 'onChange', 'touched']
    }
  }
}

当我像这样在 Blade 中添加组件时：

<div>
   <label class="typo__label">Single select</label>
   <multiselect v-model="value" :options="options" :searchable="false" :close-on-select="false" :show-labels="false" placeholder="Pick a value"></multiselect>
   <pre class="language-json"><code>@{{value}}</code></pre>
</div>

选择不起作用，它只显示{{value}} 字符串。 ¿ 有什么想法吗？

【问题讨论】：

控制台给出的错误是什么？
没有错误，显然一切正常。
尝试删除@标志
如果我删除 @blade 无法识别 {{value}}
我会说为此创建一个自定义组件

标签： laravel vue.js

【解决方案1】：

您需要在刀片中添加：

  <div id="app">
    <your component/>
       your @{{values}} no need to use @
  </div>

【讨论】：

【解决方案2】：

将父组件也添加到 HTML 中，所以如果你有 main app.js，它应该如下所示。

// mycomponent.js

import Multiselect from 'vue-multiselect'

export default {
  components: {
    Multiselect
  },
  data () {
    return {
      value: '',
      options: ['Select option', 'options', 'selected', 'mulitple', 'label', 'searchable', 'clearOnSelect', 'hideSelected', 'maxHeight', 'allowEmpty', 'showLabels', 'onChange', 'touched']
    }
  }
}

// app.js

var MyComponent = require('./mycomponent');

var app = new Vue({
  el: '#app',
  components: {
    MyComponent
  }
});

// index.blade.php

    <div id="app">
      <my-component inline-template>
        <div>
          <label class="typo__label">Single select</label>
             <multiselect v-model="value" :options="options" :searchable="false" :close-on-select="false" :show-labels="false" placeholder="Pick a value"></multiselect>
           <pre class="language-json"><code>@{{value}}</code></pre>
        </div>
      </my-component>
    </div>

HTML 中的my-component 上下文知道并跟踪该值。

这是一个小提琴，您可以看到它的实际效果

const Multiselect = VueMultiselect.Multiselect;

var MyComponent = {
  components: {
    Multiselect
  },
  data() {
      return {
      value: '',
      options: ['Select option', 'options', 'selected', 'mulitple', 'label', 'searchable', 'clearOnSelect', 'hideSelected', 'maxHeight', 'allowEmpty', 'showLabels', 'onChange', 'touched']
    }
  }
};
    
var app = new Vue({
  el: '#app',
  components: {
    MyComponent
  }
});

<link href="https://unpkg.com/vue-multiselect@2.0.0-beta.14/dist/vue-multiselect.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/vue-multiselect@2.0.0-beta.14"></script>
<script src="https://vuejs.org/js/vue.min.js"></script>

<div id="app">
  <my-component inline-template>
    <div>
      <label class="typo__label">Single select</label>
      <multiselect v-model="value" :options="options" :searchable="false" :close-on-select="false" :show-labels="false" placeholder="Pick a value"></multiselect>
      <pre class="language-json"><code>{{value}}</code></pre>
    </div>
  </my-component>
</div>

【讨论】：