时间戳

首页 > 解决方案 > 通过 PHP 在 HREF 中的 Vue.js 数据

javascript - 通过 PHP 在 HREF 中的 Vue.js 数据

问题描述

如何将 vue DATA 的结果传递给 PHP。我尝试过这种方式，但是当我看到 HREF (href = $ where $ name) 中的链接时，它给了我一个奇怪的字符串，而不是我从 VUE 代码中获得的 url。相反，如果我输入： href = "$ where $ name" 或 v-bind: href = "$ where $ name" 而不是我得到没有表的白屏。我怎样才能解决这个问题并能够在 href 中放置正确的链接？

<div class="btn-group btn-group-toggle" data-toggle="buttons">
        <label v-on:click="giallo()" class="btn btn-secondary active">
          <input type="radio" name="options" id="option1" autocomplete="off" checked> Giallozafferano
        </label>
        <label v-on:click="benedetta()" class="btn btn-secondary">
          <input type="radio" name="options" id="option2" autocomplete="off"> Fatto in Casa da Benedetta
        </label>
        <label v-on:click="nonna()" class="btn btn-secondary">
          <input type="radio" name="options" id="option3" autocomplete="off"> Ricette della nonna
        </label>
      </div>
</div>

$sql = "SELECT id,scadenza,nome,quantita,tipoMisura,categorieP,categorieD FROM Prodotti WHERE utente = '$us' ORDER BY scadenza";
$result = mysqli_query($conn, $sql);
if ($result->num_rows > 0){
  echo "<table class='top table table-striped'>";
  echo "<thead>";
    echo "<tr>";
      echo "<th scope='col'>Ricetta</th>";
    echo "</tr>";
  echo"</thead>";
  echo"<tbody>";
}
while ($row = mysqli_fetch_assoc($result)) {
  $name=$row['nome'];
  $where="{{dove}}";
  echo "<td> <a target='_blank' href='$where$name'>Found recipe </a> </td>";
  echo "</tr>";
}
//VUE CODE
<script type="text/javascript">
  var app = new Vue({
    el: '#app',
    data: {
      dove: "https://www.giallozafferano.it/ricerca-ricette/"
    },
    methods : {
        giallo: function(){
            this.dove="www.giallozafferano.it/ricerca-ricette/";
        },
        benedetta: function(){
            this.dove="https://www.fattoincasadabenedetta.it/?s=";
        },
        nonna: function(){
            this.dove="https://www.ricettedellanonna.net/?s=";
        }
    }
  });
</script>

标签： javascriptphphtmlvue.js

解决方案

首先你应该使用:href，然后你的 html 就像：

<a target='_blank' :href='{{dove}}yourstringinname'>Found recipe </a>

我认为问题是您的第二个字符串与 Vue 作为字符串不匹配，您应该将其作为 Vue 的字符串插入：

<a target='_blank' :href='{{dove}} + `yourstringinname`'>Found recipe </a>

在 PHP 中像：

<a target='_blank' :href='$where + `$name`'>Found recipe </a>

就我现在而言，Vue 应该在浏览器控制台中放置错误，因此您可以使用控制台对其进行调试。

推荐阅读