Question

我编写了一个Go程序，它有一个表单，通过调用Go代码中的路由上的fetch来检查文件是否存在。如果文件存在与否，则在JSON内部返回一个布尔值作为fileExists。我遇到了fetch调用的JSON立即更新this.found boolean的问题。

当我按下Enter键或单击按钮时，表单将通过调用onSubmit提交，其中调用checkFile（）来执行获取操作。不知何故，我必须按两次输入才能看到fetch返回的值，因为它没有立即更新this.found。我可能正在考虑这个错误的方式，但我认为它不会问。这是代码，如果有人可以提供帮助，那么点击或提交将基于checkFile调用返回的正确值：

<div class="jumbotron">
  <div class="container">
    <div class="alert alert-dark" role="alert">
    </div>
    <h1 class="display-3">Title</h1>
    <div id="app">
      <form ref="myForm" method="POST" v-on:submit.prevent="onSubmit" action="/push" class="needs-validation" id="myForm" novalidate="true">
        <div class="form-group">
          Canned List:
          <input v-model="cannedlist" ref="cannedlist" type="text" class="form-control" name="fileListFile" id="filelist"
          aria-describedby="fileListFileHelp"
          autocomplete="off" :disabled="!!individuallist" v-on:submit.prevent="onSubmit" />
        </div>
        <div class="form-group">
          Path List:
          <textarea v-model="individuallist" ref="cannedlist" :disabled="!!cannedlist" class="form-control" rows=10 name="fileListRaw" id="files" autocomplete="off"></textarea>
        </div>
        <div class="form-group">
          <button v-on:submit.prevent="onSubmit" type="submit" name="button" value="submit" id="submitButton" class="btn btn-primary" :disabled="isDisabled">Submit</button>
          <button v-on:submit.prevent="onSubmit" type="submit" name="button" value="checkOnly" id="checkOnlyButton" class="btn btn-primary" :disabled="isDisabled">Submit 2</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script src="/static/js/vue.min.js"></script>
<script>
    const app = new Vue({
      el: '#app',
      data: {
        // cannedlist: "filelist.txt",
        individuallist: "",
        found: false,
      },
      computed: {
        isDisabled: function() {
          //found = !found;
          return (this.cannedlist.length <= 0 && this.individuallist.length <= 0);
        },
      },
      methods: {
        isDisabledNew: function() {
          alert((this.cannedlist.length <= 0 && this.individuallist.length <= 0));
          // return (this.cannedlist.length <= 0 && this.individuallist.length <= 0);
          return false;
        },
        isFieldDisabled: function(e) {
          //console.log(app.$refs.individuallist.disabled);
          return false;
        },
        onSubmit: function() {
          if (this.cannedlist.length > 0) {
            this.checkFile();
            if (this.found == true) {
              this.$refs.myForm.submit();
              return;
            }
          } else if (this.individuallist.length > 0) {
            this.$refs.myForm.submit(); 
            return;
          }
        },
        checkFile: function() {
          var url = 'http://localhost:9000/CheckIfFileExists?name=' + this.cannedlist;
          return fetch(url)
            .then(response => {
              if (response.ok) {
                var v = response.json().then( response => { this.found = response.fileExists; } );
                return this.found;
              }

              return response.json().then(error => ({ error }));
            });
            return this.found;
        },
      }
      });
</script>

Answer 1

您的onSubmit函数调用checkFile并希望更新found：

    onSubmit: function() {
      if (this.cannedlist.length > 0) {
        this.checkFile();
        if (this.found == true) {
          this.$refs.myForm.submit();
          return;
        }
      } else if (this.individuallist.length > 0) {
        this.$refs.myForm.submit(); 
        return;
      }
    },

但是checkFile会返回一个承诺。 Promise通过更新found来解决。因此，您需要将found检查放在then块内：

    onSubmit: function() {
      if (this.cannedlist.length > 0) {
        this.checkFile()
        .then(() => {
          if (this.found == true) {
            this.$refs.myForm.submit();
          }
        });
        return;
      } else if (this.individuallist.length > 0) {
        this.$refs.myForm.submit(); 
        return;
      }
    },

Answer 2

以下是我所做的更改：

  methods: {
    onSubmit: function(event) {
      if (this.cannedlist.length > 0) {
        this.checkFile()
       // This promise capture is the key I was missing
        .then( (data) => {
          this.found = data.fileExists;
          if (this.found == true) {
            this.$refs.myForm.submit();
          } else {
            alert("File not found: " + this.cannedlist);
          }
        });
      } else if (this.individuallist.length > 0) {
        this.$refs.myForm.submit();
      }
    },
    checkFile: function() {
      var url = 'http://localhost:9000/CheckIfFileExists?name=' + this.cannedlist;
      return fetch(url).then((response) => response.json());
    }

立即从提取调用中获取值

2 个答案: