HREF 中的 Vue.js 数据通过 PHP

Question

How do I pass the result of the vue DATA into PHP. I tried this way but when I see the link in HREF (href = $ where $ name) it gives me a strange string and not the url one I get from the VUE code. Instead if I put: href = "$ where $ name" or v-bind: href = "$ where $ name" instead I get the white screen WITHOUT table. How can I solve this problem and be able to put the right link in the 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>

Answer 1

First of all you should use :href , then your html would be like:

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

I think problem is that your second string is not matched for Vue as string, you should insert it as string for Vue:

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

In PHP like:

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

As far as i now Vue shoud place errors in browser console, so you can debug it with console.