Question

我正在尝试创建一个具有名字和姓氏形式的网站，然后希望它在网页上的文本框中显示用户键入的任何内容，并在其中显示“名字：”和“姓氏” ：”尽管我已经定义了“ first”和“ last”的含义以及需要使用的位置，但它一直在说“ first”和“ last”没有定义。

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

在使用数据属性或在模板中调用方法时，无需使用this，因此此处的姓氏和名字代码应如下所示。

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

https://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://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function

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

[Vue警告]：未定义属性或方法“第一个”和“最后一个”

1 个答案: