0

I use vue inside file .cshtml and when I want to show the dynamic link the value of {{item.id}} show as text, not as a value

<tr v-for="item in resultQuery">
   <td>{{item.nombre}}</td>
   <td>{{item.id}}</td>
   <td>{{moment(item.FechaCambioEstado).format('YYYY-MM-DD')}}</td>
   <td>
     <a href='~/Deudores/Detalle/{{item.id}}'>Ver más</a>
       More
     </a>
   </td>
</tr>

The error is this: https://localhost:44366/Deudores/Detalle/%7B%7Bitem.id%7D%7D

Error in the console is this:

[Vue warn]: Error compiling template:

href="/Deudores/Detalle/{{item.id}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.

enter image description here

juanitourquiza
  • 2,097
  • 1
  • 30
  • 52
  • "but doesn't work" is not an explanation of a problem and image in no way clarifies what HTML you want to see generated by that code. Please [edit] the post to explain the problem (like HTML does not match your expectations, some errors in C#/JS, something else) – Alexei Levenkov Oct 23 '20 at 19:02
  • Thanks for your commentary Now I explained with more details – juanitourquiza Oct 23 '20 at 19:20
  • You should look at [MCVE] guidance again - how one would know where that `item` is defined? There is no `item` in your .cshtml code... And make sure to understand what is *text* and what is *C# code* in CSHTML - the only piece of C# code is `@Url.Action("Detalle", "Deudores", new { id = item.id })` - we can't guess what `item` is from that - even less than C# compiler. – Alexei Levenkov Oct 23 '20 at 19:26
  • I use the `{{ item.id }}` in the `` y the data I see in the table but in the line new `{ id = item.id }` say don't exist. Why? or What is a possible solution? – juanitourquiza Oct 23 '20 at 19:49
  • 1
    You did not read my previous comment :(... Let me repost - the only piece of C# code is `@Url.Action("Detalle", "Deudores", new { id = item.id })` . I suspect you don't understand the distinction between C# code and plain text in CSHTML file - I don't have a good explanation link handy... Hopefully if you think about it and for example highlight printout of your code with "this is C# code" you could sort out what you are asking and what exactly your problem is. I'll try to find a link probably on weekend. – Alexei Levenkov Oct 23 '20 at 19:58
  • Now I understand and change the question, thanks. – juanitourquiza Oct 23 '20 at 21:34
  • 1
    Please show the error message as text, not as an image of text. – Heretic Monkey Oct 23 '20 at 21:39
  • 1
    As far as the question goes, ASP.NET sees the URL with a `~` and rewrites it to use the virtual path of the application. When it does that, in URL encodes the rest. This all happens before Vue ever gets to see it. I don't know Vue, but you could just write some script to find `%7B%7Bitem.id%7D%7D` and replace it with the value of `item.id`. – Heretic Monkey Oct 23 '20 at 21:45

1 Answers1

0

Thanks for your help. The problem was Vue. I didn't use the v-bind.

<a v-bind:href="'/Deudores/Detalles'+ item.id">More</a>

The solution in this link: https://stackoverflow.com/a/40899733/2400373

juanitourquiza
  • 2,097
  • 1
  • 30
  • 52