刀片中的Vue组件 [英] Vue component in blade

问题描述

我正在尝试在刀片视图中使用此.我有.vue文件和js中的这段代码.

I´m trying to use this in my blade view. I have .vue file and this code in 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']
    }
  }
}

当我像这样在刀片中添加组件时

When i add component in blade like this `

<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}}字符串. ¿关于错误的任何想法? `

The select don´t work, only show {{value}} string. ¿Any idea about error? `

推荐答案

您也需要将父组件添加到HTML，因此，如果您有主app.js，它应该看起来像这样.

You need to add the parent component to the HTML too, so if you have main app.js it should look like this.

//mycomponent.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

// 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"上下文知道并跟踪此处的值是一个小提琴，因此您可以在操作中看到它.

So the "my-component" context in the html knows and tracks the value here is a fiddle so you can see it in action.

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>

这篇关于刀片中的Vue组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！