[Vue 警告]：未定义属性或方法"first"和"last"

Question

我正在尝试创建一个我的网站，其中我有一个和姓氏表单，然后我希望它在网页上显示文本框中的用户类型的任何内容，并在其中说'名字：'和"姓氏："，但它一直在说"第一个"one_answers"最后"，但我已经定义了它是什么以及需要使用的地方。

我在VUE JS中的经验不太经验，我对代码感到非常困惑，我害怕更改变量，因为我以前尝试过，并且我一直遇到更多的错误，但我无法弄清楚。有人可以帮我吗？

也是Github的新手，如果有人可以指导我重命名或更改的内容，我将非常感谢。

这是我正在处理的代码似乎有问题：

<template>
  <div id="app">
    <header>
      <nav>
        <ul>
          <li class="nav-item">
            <img class="logo" src="./assets/bt-logo.png"/>
            Tracerouter 
          </li>
        </ul>
      </nav>
    </header>
    <main>
      <RobotBuilder />
          <ul> 
            <li class="output1">First name: {{this.first}} </li>
            <li class="output1">Last name: {{this.last}} </li>
          </ul>
        <form class="form" action="/action_page.php">
          First name: <input class="text1" type="text" name="fname"> 
          <input class="button1" type="submit" value="First name">
          Last name: <input class="text2" type="text" name="lname">
          <input class="button2" type="submit" value="Last name"> 
      </form>
    </main>
  </div>
</template>
<script src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data () {
      return {
        first: "Taran",
        last: "Basi"
      }
    },
    methods: {
      giveName: function() {
        return this.first
      }
    }
  })
</script>
<script>
//HomePage from './home/HomePage.vue'
import RobotBuilder from './build/RobotBuilder.vue';
export default {
  name: 'app',
  components: {
    RobotBuilder,
  },
};
</script>
<style>
body {
  background: linear-gradient(to bottom, rgb(107, 2, 168), rgb(255, 255, 255));
  background-attachment: fixed;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
}
main {
  margin: 0 auto;
  padding: 30px;
  background-color: whitesmoke;
  width: 1024px;
  min-height: 300px;
}
header {
  background-color: rgb(107, 2, 168);
  width: 1084px;
  margin: 0 auto;
}
ul {
  padding: 3px;
  display: flex;
}
.nav-item {
  display: inline-block;
  padding: 10px 10px;
  font-size: 22px;
  border-right: 0.5px solid rgb(170, 170, 170);
  color: rgb(255, 255, 255);
}
.logo {
  vertical-align: middle;
  height: 50px;
}
.button1 {
  background-color: rgb(107, 2, 168); 
  border: none;
  color: white;
  padding: 6px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 13px;
  cursor: pointer;
  border-radius: 10px;
  position: static;
}
.button2 {
  background-color: rgb(107, 2, 168); 
  border: none;
  color: white;
  padding: 6px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 13px;
  cursor: pointer;
  border-radius: 10px;
  position: static;
}
form {
  display: flex;
  margin: 100px;
  align-items: center;
}
body {
  background: linear-gradient(to bottom, rgb(107, 2, 168), rgb(255, 255, 255));
  background-attachment: fixed;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
}
main {
  margin: 0 auto;
  padding: 30px;
  background-color: whitesmoke;
  width: 1024px;
  min-height: 300px;
}
header {
  background-color: rgb(107, 2, 168);
  width: 1084px;
  margin: 0 auto;
}
ul {
  padding: 3px;
  display: flex;
}
.nav-item {
  display: inline-block;
  padding: 10px 10px;
  font-size: 22px;
  border-right: 0.5px solid rgb(170, 170, 170);
  color: rgb(255, 255, 255);
}
.logo {
  vertical-align: middle;
  height: 50px;
}
.button1 {
  background-color: rgb(107, 2, 168); 
  border: none;
  color: white;
  padding: 6px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 13px;
  cursor: pointer;
  border-radius: 10px;
  position: static;
}
.button2 {
  background-color: rgb(107, 2, 168); 
  border: none;
  color: white;
  padding: 6px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 13px;
  cursor: pointer;
  border-radius: 10px;
  position: static;
}
form {
  display: flex;
  margin: 100px;
  align-items: center;
}
</style>

Answer 1

当您使用数据属性或在您的 Template 中调用方法时，您不需要使用this像这样。

 <ul> 
   <li class="output1">First name: {{first}} </li>
   <li class="output1">Last name: {{last}} </li>
 </ul>

https://v2.vuejs.org/v2/guide/syntax.html

也有问题在主要VUE实例中定义数据对象的问题。在主要实例中，不应是函数。

<script>
var app = new Vue({
  el: '#app',
  data :{
    first: "Taran",
    last: "Basi"
  },
  methods: {
     giveName: function() {
       return this.first
     }
    }
})
</script>

定义组件中的数据时，当您将其定义为函数时。https://v2.vuejs.org/v2/guide/components.html#data-must-be-a-function

<!-- for components data must be a function -->
data(){
   return {}
}