我的组件没有显示-vuejs-laravel答案

【问题标题】：my component is not displaying-vuejs-laravel我的组件没有显示-vuejs-laravel
【发布时间】：2020-12-27 06:58:28
【问题描述】：

试图在我的刀片中显示组件，但它仍然无法正常工作。我使用了 laravel 7

这是我的vue

<template>
    <h3>Option Values</h3>
</template>
<script>
    export default {
        name: "attribute-values",
        props: ['attributeid'],
    }
</script>

在我看来我是这样称呼它的

<div class="tab-pane" id="values">
          <attribute-values :attributeid="{{ $attribute->id }}"></attribute-values>
                </div>

我把它导入到js文件中

Vue.component('attribute-values', require('./components/AttributeValues.vue').default);

这是我的 package.json 文件

"devDependencies": {
    "axios": "^0.19",
    "bootstrap": "^4.0.0",
    "cross-env": "^7.0",
    "jquery": "^3.2",
    "laravel-mix": "^5.0.1",
    "lodash": "^4.17.19",
    "popper.js": "^1.12",
    "resolve-url-loader": "^2.3.1",
    "sass": "^1.20.1",
    "sass-loader": "^8.0.0",
    "vue": "^2.5.17",
    "vue-template-compiler": "^2.6.10"
},
"dependencies": {
    "vue-swal": "^0.1.0",
    "vue-js-modal": "^1.3.26"
}

我应该怎么做。提前谢谢你。我多次运行 npm run dev 和 npm run watch。我的文件 js 是在公用文件夹中生成的，所以没有问题。但组件仍未出现。

【问题讨论】：

请用实际代码替换图片
另外，请确保您正在运行npm run dev
多次运行。还是没有变化
在刀片视图中，确保父 div 的 ID 为 app
将:attributeid 更改为attributeid，即删除: 前缀。您没有在那里绑定任何数据值，所以不要使用v-bind。您的浏览器控制台中可能对此有错误

标签： laravel vue.js

【解决方案1】：

我解决了。我所做的只是将 div id=app 与我的内容分开。因为标签与 vue 不匹配。我在我的 js 文件中添加 vue.use(component) 如下所示：

 import AttributeValues from './components/AttributeValues.vue'
    Vue.use(AttributeValues);
    
    Vue.component('attribute-values', require('./components/AttributeValues.vue').default, {
        name: 'attribute-values'
    });

希望它能解决某人的问题。

【讨论】：