Question

我正在尝试在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>

Answer 1

请参阅documentation on complication scope，特别是：

父模板中的所有内容都在父作用域中编译;子模板中的所有内容都在子范围内编译。

您的模板包含input和mask属性，但您的data功能未设置这些属性。它们需要设置和反应，所以如果它们发生变化，Vue可以将它们传递给子组件（看起来你的bs-input组件暴露了input和mask属性）。

在VueJS项目中使用外部VueJs组件

1 个答案: