Question 16054 in Laravel Question posted in
The official Laravel Documentation can be found here.

How can I convert integers to corresponding strings in Vue markup? – Laravel

I have a table for fetching data from the database. I used the "status" field for managing this table.

if the status is = 1, it means "Active" else if the status is = 2, it means "Completed" else if the status is = 0, t means "Deleted".

Then I need to show the above status word in the web page table.
I used the below to show the status number.

<tr v-for="(depAcc, index) in depAccs" :key="index">
  <td>{{ index + 1 }}</td>
  <td>{{ depAcc.created_at }}</td>
  <td>{{ depAcc.name }}</td>
  <td>{{ depAcc.status }}</td>

Please instruct me to show the status word on the table.

Tags:

2

Answers


  1. 0

    I would create a data property containing the status map, like this:

    data() {
  return {
    statusNames: {
      0: 'Deleted',
      1: 'Active',
      2: 'Completed'
    }
  }
}

    Then you can reference that in your markup:

    <td>{{ statusNames[depAcc.status] }}</td>
    Login or Signup to reply.
  2. 0

    In Vue, anything inside double braces {{ //this }} is evaluated as JS. You can therefore write a method to return strings based on your status, then put a function into your double braces.

    <tr v-for="(depAcc, index) in depAccs" :key="index">
    <td>{{ index + 1 }}</td>
    <td>{{ depAcc.created_at }}</td>
    <td>{{ depAcc.name }}</td>
    <td>{{ statusText(depAcc.status) }}</td>
</tr>

    Then in your page script, add this method

    var app = new Vue({
    el: '#app',
    methods:{
        statusText(status){
            let message = "Unknown Status"
            if (status == 0) message = "Deleted"
            if (status == 1) message = "Active"
            if (status == 2) message = "Completed"
            return message
        }
    }
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search