Question

因此，我有一个项目应用程序，您可以在其中添加项目。在初始加载时，当用户需要创建新项目时，我需要打印出5个表行，以便用户可以在这些行中输入信息。由于这些行已绑定到project变量，并且该项目是新项目，因此该数组为空，因此不会打印任何内容。

所以我想问题是我该如何“伪造”那些空记录？

有人知道要解决这个问题吗？

到目前为止，这是我的代码：

HTML

<tr v-for="item in project.items">
                        <td>1</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>

VueJS

export default {
    data() {
        return {
            project: {
                items : []
            },
        };
    },
    created() {
        this.setProject();
    },
    methods : {
        /**
         * Sets Project
         */
        setProject(){
            /**
             * Will check for project id and get it from db
             */
        },

    }
}

Answer 1

您可能需要在这里分开关注。您应该具有仅显示初始项目的内容，该项目包含5行，其中包含您希望用户看到的任何初始值。然后提供一些功能来更新或将其设置为新项目。单独允许用户显示数据库中存储的项目。

更新示例

看完脚本后，听起来好像您正在将setProject方法更像是一种获取方法而不是处理方法。当某人定义了他们的数据时，设置者应进行将其更新或添加到数据库的工作。 getProject方法检索信息并显示。

new Vue({
  template: `<div id="projectContainer">
  <tr v-for="item in project.items">
    <td>{{item.val}}</td>
  </tr>
</div>`,
  data() {
    return {
      project: {
        items:[
           {val:'a'},{val:'b'},{val:'c'},{val:'d'},{val:'e'}
        ]
      },
    };
  },
  created() {
    this.setProject();
  },
  methods: {
    /**
     * Sets Project
     */
    setProject() {
    
    
      // this sounds like a get method rather than a set
      
      
      /**
       * Will check for project id and get it from db
       */
    },

  }
}).$mount("#app");

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

VueJS打印空对象项

1 个答案: