Question

我有一个小应用程序，它将包含多个相似的表格。为了避免多次编写相同的内容，我一直试图将表单模板拆分为另一个文件。由于某种原因，它无法渲染。我尝试用稍微不同的方式编写它，但是还没有找到正确的方法。

Add.vue（我要显示表单的页面）

<template>
  <div>
    <basicform/> 
  </div>
</template>
<script>
import basicform from './basicform.vue';

export default {
  name: "Add",
  components: {
     basicform
  },

};
</script>

basicform.vue

<template>
  <b-form @submit="submitForm" @reset="resetForm">
    <b-form-group label="Record name:">
      <b-form-input v-model="form.name"></b-form-input>
    </b-form-group>
    <b-form-group label="Year:">
      <b-form-input v-model="form.year"></b-form-input>
    </b-form-group>
    <b-form-group label="Artist:">
      <b-form-input v-model="form.artist"></b-form-input>
    </b-form-group>
    <b-button type="submit" variant="primary">Submit</b-button>
    <b-button type="reset" variant="danger">Reset</b-button>
  </b-form>
</template>

<script>
const basicform = {
  name: basicform,
  data: {
    form: {
      name: "",
      year: "",
      artist: ""
    }
  },
  methods: {
    submitForm(evt) {
      evt.preventDefault();
      //Functionality for form post
    },
    resetForm(evt) {
      evt.preventDefault();
      //functionality for form reset
    }
  }
};
export default basicform;
</script>

Answer 1

组件名称值应为字符串{{1}}：

{{1}}

这将引发

错误

未定义基本形式

Answer 2

使用<basicform></basicform>而不是使用自终止标签（<basicform />）渲染组件。

Answer 3

啊，我修好了。我定义的数据错误，这是正确的方法：

data () {
    return {
    form: {
      name: "",
      year: "",
      artist: ""
    }}

仍然感谢答案！

Vue-单个文件组件未呈现

3 个答案: