How to use v-bind vue.js?

Question

Vue.js

Hello, there is a following task.
In the table in each row there is a button that should open the full information about the data in the row.
The data is received by ajax and shown in a modal window. When requesting, you need to pass 3 parameters. Here is the question.
Button code

<td style="text-align:center;">
       <input type="button" id="show-modal"
                 class="Insp"
                 v-bind:name="{{order.mod.real|safeseq}}"
                 text="{{order.mod.port}}"
                 test="{{order.mod.id}}"
                 @click="open" value="Открыть">
 </td>

I get data from the button like this

var self = this
self.selecIP = event.target.name

If you apply v-bind to "text" and "test" and get data in the same way, then the data is not written and, naturally, is not transmitted.
The question is, is it possible to use more than one v-bind for one element?
And how do I get the data I need?

Answer 1

more than one bind is:
v-bind:attr1="value1":attr2="value2":attr2="value2":attr4="value4"...

Answer 2

<td style="text-align:center;">
       <input type="button" id="show-modal"
                 class="Insp"
                 v-bind:name="{{order.mod.real|safeseq}}"
                 text="{{order.mod.port}}"
                 test="{{order.mod.id}}"
                 @click="open(order.mod.real|safeseq)" value="Открыть">
 </td>

methods:{
  open(name){
    var self = this
    self.selecIP=name
  }
}

Answer 3

It's not entirely clear what you want to do, pass data from the button to the handler? Double curly brackets IMHO cannot be used in attributes. It is possible like this:

<input type="button" id="show-modal"
                 class="Insp"
                 :name="order.mod.real | safeseq"
                 @click="open(order.mod.real, oreder.mod.port, order.mod.id)
                 value="Открыть">

Next, in the handler, do what you need.