Question

我正在构建一个应用程序来使用Meteor和Vue来学习功能，但我不太了解使用Vue的反应性。

此屏幕的目的是允许当前用户在数据库中搜索某个人。该人的ID为cpf，因此我输入的内容允许用户输入。

然后，它调用服务器，搜索CPF，如果找到，则返回Patient，如果没有，则不返回任何内容。

然后，如果数据库中有一个Patient，我想显示一个表单，但是如果没有这样的Patient，我想显示另一个表单。

但是此模板无法正常工作。它不会更改当前形式。我在这里想念什么？我没有正确理解什么？

它绘制了v-if的第三子句，并且在更新对象时从不进入第一或第二子句。

<div class="recepcao">
  <form v-on:submit.prevent="" v-if="patient.creating">
    <b-field label="Adicionar um novo paciente">
      <cleave v-model="cpf" :options="cpfOptions"></cleave>
    </b-field>
    <b-button native-type="submit">Adicionar Paciente</b-button>
  </form>
  <form v-on:submit.prevent="" v-else-if="patient.loaded">
    <b-field label="Confirmar presença do paciente">
      <cleave v-model="cpf" :options="cpfOptions"></cleave>
    </b-field>
    <b-button native-type="submit">Confirmar Presença</b-button>
  </form>
  <form v-on:submit.prevent="searchCpf" v-else>
    <b-field label="Digite o CPF do paciente">
      <cleave v-model="cpf" :options="cpfOptions"></cleave>
    </b-field>
    <b-button native-type="submit">Buscar</b-button>
  </form>
</div>
</template>

<script>
import Cleave from 'vue-cleave-component'

export default {
  data() {
    return {
      patient: {},
      cpf: '',
      cpfOptions: {
        delimiters: ['.', '.', '-'],
        blocks: [3, 3, 3, 2],
        numericOnly: true
      }
    }
  },

  methods: {
    searchCpf() {
      var vm = this;
      Meteor.call('patients.get', {
        cpf: this.cpf
      }, (error, result) => {
        if (error)
          console.error(error)
        else if (!result) {
          patient = {
            creating: true
          }
        } else {
          this.patient = result
          this.patient.loaded = true
        }
      })
    },
  },

  components: {
    Cleave,
  }
}
</script>


<style lang="less" scoped>
.recepcao {
    text-align: center;
}
</style>```

了解Vue与流星的反应性

0 个答案: