Question

我知道这类问题无处不在，但是我很难找到一个好的答案（我是VueJS的新手）。对此感到抱歉。

我正在尝试使用vform传递数据。

我想做的是通过vform将用户详细信息添加到表中。

这是我的Users.vue代码

 #include <cstdio>
 #include <iostream>
 #include <unistd.h>
 #include <boost/asio/io_service.hpp>
 #include <boost/bind.hpp>
 #include <boost/thread/thread.hpp>

 const size_t numTasks = 100000;

 void print_counter(const size_t id)
 {
   if (id + 1 == numTasks) {
     printf("sleeping for %ld\n", id);
     sleep(15);
   }
   printf("%ld\n", id);
 }

 int main(int argc, char** argv)
 {
   using namespace std;
   using namespace boost;

   asio::io_service io_service;
   asio::io_service::work work(io_service);

   const size_t numWorker = 4;
   boost::thread_group workers;
   for(size_t i = 0; i < numWorker; ++i) {
     workers.create_thread(boost::bind(&asio::io_service::run, &io_service));
   }

   for(size_t i = 0; i < numTasks; ++i) {
     io_service.post(boost::bind(print_counter, i));
   }

   // TODO: wait until all the tasks are done above


   for(size_t i = 0; i < numTasks; ++i) {
     io_service.post(boost::bind(print_counter, i));
   }

   // TODO: wait until all the tasks are done above

   // ...

   // Finally stop the service
   io_service.stop();
   workers.join_all();
   return 0;
 }

这是我的app.js

<div class="modal fade" id="addNew" tabindex="-1" role="dialog" aria-labelledby="addNew" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Add New</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>

          <div class="modal-body">
              <div class="form-group">
              <input v-model="form.name" type="text" name="name"
              class="form-control" :class="{ 'is-invalid': form.errors.has('name') }">
              <has-error :form="form" field="name"></has-error>
             </div>
          </div>

          <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Save changes</button>
          </div>

        </div>
      </div>
    </div> 

<script>
    export default {
    data(){

        return{

            form: new Form({
                name: ''

            })
        }
    },  
 }
</script>

Answer 1

您遇到的问题很可能与此有关：

<input v-model="form.name" type="text" name="name"

您可以看到它是唯一调用.name的地方。这意味着您的form对象是undefined，并且代码正尝试在其上调用属性name，这会引发错误。

如果查看vform README，您将看到import语句实际上在组件内部。代码的问题在于app.js中的导入不会神奇地出现在组件内部，因此您无法在Vue组件中进行new Form()。虽然确实将其分配给window中的app.js对象，但是以后不要再使用它和IMO，最好显式导入依赖项。

因此，总而言之，您需要做的是：在Vue组件中打开<script>标签之后立即添加此import语句

import { Form } from 'vform';

获取Vue TypeError无法读取未定义的属性“名称”

1 个答案: