Question

我被困在这一个上面。我正在使用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实例中传递我的变量。

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

将JS变量传递给vue实例

0 个答案: