Question

我有一个Vue应用程序，可以生成与用户喜欢的一样多的表单。每个表单代表此'risk'数据模型中的'risks'：

  var app = new Vue({
    el: '#app',
    data: {
        risks: [
          {
            'risk_name': '', 'fields': [{'field': '', 'type': ''}], 'errors':[]
          }
        ],
      },

然后我将'risks'发送到帖子 API请求。然后我做了第二个 get 请求，该请求将带有处理数据的模板带回JSON。到现在为止还挺好。但是，如何使用此数据渲染模板（新页面）。

这就是我收到数据的方式：

    Submit() {
       if (this.checkValidity()) {
        console.info(this.risks)
        axios.post('risks', this.risks)

        .then(function(response) {
          axios.get('risks')//This gets the data back
        })

        .catch(function(error) {
          alert('This Error occured: ' + error)
        })

      }
    },

这是我在上面调用的GET API调用（Flask）：

@app.route('/risks', methods=['GET'])
def getInsurancePolicyForm():
    risks = getTables(app.metadata)
    return render_template('form.html', risks=risks)

我可以在开发人员工具中看到渲染的模板，但用户看到的页面保持不变。

Answer 1

您的页面应该专注于risks对象，而不是API调用的响应。

当用户选择选项时，将它们添加到risk数据对象中，以便您的risk对象如下所示：

risks: [
  {
    'risk_name': '', 'fields': [{'field': 'My Field', 'type': 'text', modelToHoldData: ''}], 'errors':[]
  }
]

然后，当用户点击提交时，无论如何都要将其发送到API，但您不需要那里的模板，请使用risks这样的对象（记住要隐藏他们的表单）刚刚选择了他们的领域：

<div v-for="risk in risks">
    <label>{{risk.field}}</label>
    <input type="text" v-if="risk.type === 'text'" v-model="risk.modelToHoldData" />
</div>

您可以调整上面的示例，以添加允许用户选择的示例的多个变体。

完成所有这些并且您需要访问用户输入的数据后，您可以再次遍历数组，只需访问每个modelToHoldData上的risks道具。

如何使用VueJS和Axios渲染模板？

1 个答案: