Question

这是我在JSFiddle上的代码。 https://jsfiddle.net/irfandyjip89/eywraw8t/440190/

window.onload = function() {
  var app = new Vue({
    el: "#app",
    data: {
      toWorkOrder: "",
      workorder: {
        data: [{
          no_workorder: 1234,
          job: 'Testing'
        }, {
          no_workorder: 2345,
          job: 'Survey'
        }],
        filter: null,
        fields: {
          no_workorder: {
            label: 'No',
            sortable: true
          },
          job: {
            label: 'Job Type'
          },
          details: {
            label: "Action"
          }
        }
      }
    },
    methods: {
      getNoWO(wo) {
        detailString = "localhost/work-order-details.php?no_wo=" + wo;
        alert(detailString);
        return this.toWorkOrder = detailString;
      }
    }
  })
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" rel="stylesheet" />

<div id="app" class="mx-3 my-3">
  <b-table hover small bordered :items='workorder.data' :filter='workorder.filter' :fields='workorder.fields'>
    <div slot="details" slot-scope='work'>
      <a target="_blank" :href="toWorkOrder">
        <b-button variant="dark" class="px-1 py-1" @click='getNoWO(work.item.no_workorder)'>
          Details
        </b-button>
      </a> {{work.item.no_workorder}}
    </div>
  </b-table>
  <!-- So here's the actual problem, it seems that the element a, goes first, without the link given in "toWorkOrder", so it overlaps. However I had no idea how to make a wait for toWorkOrder loads first! -->
  {{toWorkOrder}}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

并转到指导页面work-order-details.php

var_dump($_GET);

我想做什么

用户单击“详细信息”按钮
启动我的方法getNoWO并获取所选no_wo的变量
getNoWO影响toWorkOrder的值，该值通过a绑定到:href
用户在新页面中获得请求的no_wo。

实际发生的事情

用户单击的详细信息，在第一次单击时，将返回到同一页面。
第二次单击时，便产生了第一次单击的价值！
第三次尝试，单击另一个按钮，它将使用户获得第二次点击的结果。

所以..

首次点击：打开同一页面。 第二次点击：获取“首次点击”价值。 第三次点击：获取第二次点击的价值。

这很奇怪，因为当我单击第一次单击时，警报会说出我单击的项目的确切值，然后是第二个，依此类推。但是我却改为发送到其他页面。可以询问更多信息。

PS 。我发现了问题，您也可以在JSFiddle上阅读它。似乎a元素与函数重叠，因此a首先没有toWorkOrder中给出的链接。所以，新问题。如何使a等待toWorkOrder直到加载？

VueJS2-HTML：如何在加载到下一页之前使'a'元素等待方法？

0 个答案: