将JS变量传递给vue实例

时间:2018-02-13 18:15:48

标签: javascript forms laravel vue.js var

我被困在这一个上面。我正在使用Vue.js开发Laravel 5.5。 我正在尝试将JS变量传递给我的app.js文件中的Vue实例,以便我的输入字段(使用vue组件创建)显示来自先前请求的值,以防验证失败(以便用户不必再次输入内容)。我这样做的原因是vue输入字段的行为不像html输入字段,我必须找到一个解决方法。

所以这是我视图文件中的输入字段:

<input-tag id="input-tag" class="form-control" style="font-size: 22pt; resize: vertical; height: 150px; line-height: 14px" :tags.sync="inputtag" v-model="inputtag"></input-tag>
<input type="hidden" :value="inputtag" name="equipment"></input>

这是我的JavaScript(jQuery)也在视图文件中:

var eqJSprep = '{{ $oldEquipment }}'
var eqJScommas = eqJSprep.replace(',', '"') + '"'
var eqJSready = eqJScommas.replace(new RegExp(',', 'g'), '","')

if (eqJSprep == '') {
  equipmentJS = ''
} else {
  equipmentJS = eqJSready
}

这是我的app.js:

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('example-component', require('./components/ExampleComponent.vue'));

Vue.component('input-tag', require('./components/VueTagInput.vue'));


console.log(equipmentJS)

var vue = new Vue({
    el: '#input-tag',
    data: {
      inputtag: [equipmentJS]
    }
});

现在,console.log(equipmentJS)正常工作 - 它显示了我在Chrome中的JS控制台传递的内容(这是旧的请求数据)。 此外,如果我手动在inputtag:字段(app.js)中键入数组,文本框会显示它应该是什么。 我需要的是动态创建的数组“...”,“...”,“......”在这里inputtag: [HERE] 好像我只是无法在Vue实例中传递我的变量。

如果有人有线索,请帮忙。 干杯

0 个答案:

没有答案