VueJSプロジェクトで外部VueJsコンポーネントを使用する

Question

VueJSプロジェクトでVueStrapを使用しようとしていますが、webpackerがうまく読み込んでいるようですが、これを端末出力で見ることができます。私はこのエラーを取得するVUEストラップ：

[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. 

私はVueのインスタンス内のコンポーネントとしてVueStrap含むしようとしたが、それは仕事を得ることができませんでした。 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を参照してください。

Everything in the parent template is compiled in parent scope; everything in the child template is compiled in child scope.

をあなたのテンプレートが含まれてinputプロパティはですが機能でこれらの機能が設定されていません。彼らは設定して反応する必要がありますので、もしそれらが変更されると、Vueはそれらを子コンポーネントに渡すことができます（bs-inputコンポーネントはinputとmaskのプロパティを公開しています）。