Mockupless

Parameters

In the Managing lists section, you learned how to remove an item from a list with the splice method:

You can remove an item by passing its index to the method:



 




<div v-for="(task, i) in tasks">
  <div>{{task}}</div>
  <button @click="tasks.splice(i, 1)">
    X
  </button>
</div>

If you move the instructions from @click event listener to a function (as it was done in the previous article), the prototype won’t work:



 




<div v-for="(task, i) in tasks">
  <div>{{task}}</div>
  <button @click="removeItem()">
    X
  </button>
</div>

methods: {
  removeItem () {
    this.tasks.splice(i, 1)
  }
}

i is used inside the function, but, at this point, the function has no idea what i stands for. This function can be called from anywhere, and it can’t know where it was called from. In the function’s definition, there's no indication of the value of i.

To address this issue the event listener must not only call a function but also provide the required values a function needs to work properly. This is called passing parameters to a function:



 




<div v-for="(task, i) in tasks">
  <div>{{task}}</div>
  <button @click="removeItem(i)">
    X
  </button>
</div>

 
 



methods: {
  removeItem (i) {
    this.tasks.splice(i, 1)
  }
}
  • In the @click listener, you call a function and pass it the value of i by placing i inside parentheses.
  • In the function’s definition in methods section, you specify a name for the value a function is expected to receive, also inside parentheses.
  • This name is used in the splice method that is part of the function’s instructions so the method knows which item to delete.

Naming parameters

When you are passing something to a function, you are not actually passing a variable, which has a name and a value. You are passing only a value. When you define the function removeItem (i) {...} in the methods section, you don't mean “expect i to be passed to this function”. In fact, you mean “expect a value and name it i so that it can be accessed by this name inside the function”.

This means that you can give any name to a parameter and use that name inside the function. The following code works the same as the code shown above:



 




<div v-for="(task, i) in tasks">
  <div>{{task}}</div>
  <button @click="removeItem(i)">
    X
  </button>
</div>

 
 



methods: {
  removeItem (index) {
    this.tasks.splice(index, 1)
  }
}

When the function is called, the value of i (not i itself) is passed into a function. The function gives the name index to this value. The name index is then used to pass the value to the splice method.

This is an important feature even though its value is not obvious in this simple example. In complex prototypes a function may be called from multiple places, each one using different names to pass a value. The ability of functions to accept values that you can name as you wish makes them a truly universal tool.

Multiple functions in the methods section are separated by commas:




 


 





methods: {
  functionOne () {
    /* ... */
  },
  functionTwo () {
    /* ... */
  },
  functionThree () {
    /* ... */
  },
}

Practice

To practice working with properties, add them to the prototypes you created that use an index in their instructions:

Channels

  1. Fork you result of Navigation with counters from the Objects article. You can also fork the prototype from the article.
  2. Create the function selectChannel.
  3. Move the instructions from @click listener to the function. Don’t forget to add this. wherever you reference a variable from the data section.
  4. Specify a value to be passed to the function. Call it index and use it in the push method.
  5. Use the function in the @click listener by specifying the function’s name, followed by paretheses. Pass an index as a parameter.

From list to list

  1. Fork your result of the From list to list task from the Managing lists article. You can also fork the prototype from the article.
  2. Create 2 functions: fromLeftToRight and fromRightToLeft.
  3. Move the instructions from @click listeners to the functions. Don’t forget to add this.
  4. Specify the values in the functions. Call them index and use them in the push and splice methods.
  5. Use the functions in the @click listeners by specifying the functions’ names, followed by parentheses. Pass an index as a parameter to each function.

Notes app

  1. Fork your result of the Note-taking app task from the Managing lists article. You can also fork the prototype from the article.
  2. Create two functions: addNote and deleteNote.
  3. Move the instructions from @click listeners to the functions. Don’t forget to add this.
  4. Specify a value to be passed to the deleteNote function. Call it index and use it in the splice method.
  5. Use the functions in the @click listeners by specifying the functions’ names, followed by paretheses. Pass an index as a parameter to deleteNote.

← The task →