带有 Laravel 的 VueJS 3 内联模板

Question

大家好，我对这个带有 VueJS 和 Laravel 的内联模板有一个又一个的问题。 现在的问题是我有这个组件：

<template>
<div>
    <slot ></slot>
    <p>Test</p>
</div>
   
</template>
<script>
export default {
    props: ['answer'],
    data(){
        return{
            editing: false,
            test: 'Test'
        }
    },
     methods: {
        edit () {
           console.log('edit')
        }
     }
}
</script>

我在 app.js 中注册组件

import { createApp } from 'vue';
require('./bootstrap');
require('./fontawesome');

import Answer from './components/Answer'

const app = createApp({})
app.component('user-info', require('./components/UserInfo.vue').default);
app.component('answer', require('./components/Answer.vue').default);
app.mount("#app")

我想在我的刀片中使用模板

answer.blade.php

<answer :answer="{{ $answer }}" >
    <div class="media post">
        @include ('shared._vote', [
            'model' => $answer
        ])
            
        <div class="media-body">
            <form v-if="editing">
                Edit
            </form>
          <div v-else>
            {!! $answer->body_html !!}
            <div class="row">
                <div class="col-4">
                    <div class="ml-auto">
                        @can('update',$answer)
                        <a @click.prevent="edit" class="btn btn-sm btn-outline-info">Edit</a>
                        @endcan
                        @can('delete', $answer)
                        <form method="POST" class="form-delete" action="{{route("questions.answers.destroy", [$question->id,$answer->id])}}">
                            @method('DELETE')
                            @csrf
                            <button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('Are you sure?')">Remove</button>
                        </form>
                     @endcan
                    </div>
                </div>
                <div class="col-4">
    
                </div>
                <div class="col-4">
                  
                    <user-info :model="{{$answer}}" label="Answered"></user-info>
                </div>
            </div>
            
          </div>
        </div>
    </div>
    <hr>
</answer>

@click.prevent="edit" 我想在我的组件中访问方法编辑但我收到此错误 - https://prnt.sc/wzmcx9 我也有变量编辑，我想从 false 更改为 true，这样我就可以在我的刀片中隐藏和显示编辑表单。但我收到此警告等。

这是我在 composer.json 中的数据包，因为我认为它可能存在问题：

 "devDependencies": {
        "@fortawesome/fontawesome-svg-core": "^1.2.32",
        "@fortawesome/free-brands-svg-icons": "^5.15.1",
        "@fortawesome/free-regular-svg-icons": "^5.15.1",
        "@fortawesome/free-solid-svg-icons": "^5.15.1",
        "@vue/compiler-sfc": "^3.0.5",
        "axios": "^0.21",
        "bootstrap": "^4.0.0",
        "jquery": "^3.2",
        "laravel-mix": "^6.0.0-beta.17",
        "laravel-mix-vue3": "^0.7.0",
        "lodash": "^4.17.19",
        "popper.js": "^1.12",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.20.1",
        "sass-loader": "^8.0.0",
        "vue": "^3.0.5",
        "vue-loader": "^16.1.2"
    }

提前感谢您的帮助

Answer 1

Vue 3 中删除了内联模板，文档提供了一些替代选项。

https://v3.vuejs.org/guide/migration/inline-template-attribute.html