Javascript [Vue warn]：属性或方法；“第一”；及；最后一句话；没有定义

我正在尝试创建一个网站，在那里我有一个名字和姓氏表单，我想让它在网页上显示用户在文本框中键入的任何内容，其中显示“名字”和“姓氏”，但它一直说“第一个”和“最后一个”没有定义，即使我已经定义了它是什么以及需要在哪里使用

我在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>

示踪器



名字：{{this.First}
姓氏：{{this.Last}

名字：
姓氏：
var app=新的Vue({
el:“#应用程序”，
数据（）{
返回{
第一个：“塔兰”，
最后：“巴斯”
}
},
方法：{
giveName:function（）{
先把这个还给我
}
}
})
//来自“./home/home.vue”的主页
从“/build/RobotBuilder.vue”导入RobotBuilder；
导出默认值{
名称：“应用程序”，
组成部分：{
机器人制造者，
},
};
身体{
背景：线性梯度（到底部，rgb（107，2168），rgb（255，255，255））；
背景附件：固定；
}
#应用程序{
字体系列：“Avenir”、Helvetica、Arial、无衬线字体；
}
主要{
保证金：0自动；
填充：30px；
背景色：白烟；
宽度：1024px；
最小高度：300px；
}
标题{
背景色：rgb（107,2168）；
宽度：1084px；
保证金：0自动；
}
保险商实验室{
填充：3倍；
显示器：flex；
}
.导航项目{
显示：内联块；
填充：10px 10px；
字体大小：22px；
右边框：0.5px实心rgb（170170170）；
颜色：rgb（255、255、255）；
}
.标志{
垂直对齐：中间对齐；
高度：50px；
}
.按钮1{
背景色：rgb（107,2168）；
边界：无；
颜色：白色；
填充：6px 20px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：13px；
光标：指针；
边界半径：10px；
位置：静态；
}
.按钮2{
背景色：rgb（107,2168）；
边界：无；
颜色：白色；
填充：6px 20px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：13px；
光标：指针；
边界半径：10px；
位置：静态；
}
形式{
显示器：flex；
利润率：100像素；
对齐项目：居中；
}
身体{
背景：线性梯度（到底部，rgb（107，2168），rgb（255，255，255））；
背景附件：固定；
}
#应用程序{
字体系列：“Avenir”、Helvetica、Arial、无衬线字体；
}
主要{
保证金：0自动；
填充：30px；
背景色：白烟；
宽度：1024px；
最小高度：300px；
}
标题{
背景色：rgb（107,2168）；
宽度：1084px；
保证金：0自动；
}
保险商实验室{
填充：3倍；
显示器：flex；
}
.导航项目{
显示：内联块；
填充：10px 10px；
字体大小：22px；
右边框：0.5px实心rgb（170170170）；
颜色：rgb（255、255、255）；
}
.标志{
垂直对齐：中间对齐；
高度：50px；
}
.按钮1{
背景色：rgb（107,2168）；
边界：无；
颜色：白色；
填充：6px 20px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：13px；
光标：指针；
边界半径：10px；
位置：静态；
}
.按钮2{
背景色：rgb（107,2168）；
边界：无；
颜色：白色；
填充：6px 20px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：13px；
光标：指针；
边界半径：10px；
位置：静态；
}
形式{
显示器：flex；
利润率：100像素；
对齐项目：居中；
}

当您使用数据属性或调用模板中的方法时您不需要使用

此

，因此此处的名字和姓氏代码应如下所示

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

名字：{{First}
姓氏：{{Last}

此外，在主Vue实例中如何定义数据对象也存在问题。在主要情况下，它不应该是一个函数

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

var app=新的Vue({
el:“#应用程序”，
数据：{
第一个：“塔兰”，
最后：“巴斯”
},
方法：{
giveName:function（）{
先把这个还给我
}
}
})

在组件中定义数据的时间是将其定义为函数的时间

数据（）{
返回{}
}

谢谢，我删除了“this”，这正是您推荐的方式，但该网站仍然存在相同的问题。好的，我看到了另一个问题，现在看到了我的更新答案。哦，是的，我认为我写的数据对象错误，我现在更改了它，但相同的问题仍然存在。您在控制台中是否收到任何错误？它应该像你拥有的那样工作。请看这里，也许您的

RobotBuilder

中有一个错误导致了您的问题。我也看到了其他问题，我无法完全理解您试图做什么。你真的想让名字后面的按钮还是最后一个按钮来提交表单？通常，您希望使用ajax提交输入的值，而不是从vue应用程序重定向。

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