0

我正在尝试在 VueJS 项目中使用 VueStrap，看起来 webpacker 正在加载它，我可以在终端输出中看到这一点，但是，当我尝试使用 vue-strap 中的组件时，我得到了这个错误：

[Vue warn]: Property or method "input" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

我尝试将 VueStrap 作为组件包含在 Vue 实例中，但无法使其正常工作。如何正确地将 VueStrap 作为组件包含在内？

谢谢！

这是我的 application.js：

import Vue from 'vue/dist/vue.js'
import App from '../components/app.vue'
import VueStrap from 'vue-strap'


document.addEventListener('DOMContentLoaded', () => {
  document.body.appendChild(document.createElement('app'))
  const app = new Vue({
    el: 'app',
    template: '<App/>',
    components: { App }
  })

  console.log('app')
})

这是我的 app.vue 文件

<template>
  <div id='app'>
    <p> {{ message }} </p>
    <bs-input :value.sync="input" label="Username" help="Only allows lowercase letters and numbers."
    error="Insert username" placeholder="Username can't start with a number." pattern="^[a-z][a-z0-9]+$"
    :mask="mask" minlength="5" readonly required icon>
  </bs-input>
  </div>
</template>


<script>
  export default {
    data: function () {
      return {
        message: "Hello World"        
      }
    }
  }
</script>



<style scoped>
  p {
    font-size: 2em;
    text-align: left;
  }
</style>
4

1 回答 1

0

请参阅有关并发症范围的文档，特别是：

父模板中的所有内容都在父范围内编译；子模板中的所有内容都在子范围内编译。

您的模板包括input和mask属性，但您的data函数没有设置它们。它们需要设置和响应，因此如果它们发生变化，Vue 可以将它们传递给子组件（看起来你的bs-input组件公开了一个input和mask属性）。

于 2017-11-30T13:39:24.447 回答