Elevate the functionality of your table in BoostrapVue by customizing it to display items

How can I modify the code below to turn the items into input fields that the user must enter? Instead of listing the items, I would like to replace them with input fields.

<template>
  <div>
    <b-form-input v-for="(item, index) in items" :key="index" v-model="items[index]"></b-form-input>
  </div>
</template>
    
<script>
export default {
  data() {
    return {
      items: [
        { age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
        { age: 21, first_name: 'Larsen', last_name: 'Shaw' },
        { age: 89, first_name: 'Geneva', last_name: 'Wilson' },
        { age: 38, first_name: 'Jami', last_name: 'Carney' }
      ]
    }
  }
}
</script>

Answer №1

Another option is to utilize v-slot:cell():

new Vue({
  el: "#app",
  data() {
    return {
      fields: ['index', 'first_name', 'last_name', 'age'],
      items: [
        { isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
        { isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw' },
        { isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson' },
        { isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' }
      ]
    }
  }
})
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="04666b6b70777076657444302a312a37">[email protected]</a>/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.18.1/bootstrap-vue.min.css" />
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bacccfdffa88948c948b88">[email protected]</a>/dist/vue.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.18.1/bootstrap-vue.min.js"></script>

<div id="app">
  <b-table striped hover :items="items" :fields="fields">
    <template v-slot:cell(index)="{ index }">
      {{ index + 1 }}
    </template>
    <template v-slot:cell()="{ item, field: { key }}">
      <b-form-input v-model="item[key]" />
    </template>
  </b-table>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Manipulating the DOM using Vue.js and jQuery can significantly improve the

I'm seeking advice on how to handle a situation where I need direct access to DOM elements while using VUE.JS. Currently, I am using the Fomantic-UI framework (a fork of Semantic UI) and it takes around 100ms (?) for an element to be created, making i ...

"Adding dots" in a slideshow using HTML, CSS, and JS

I'm currently working on a slideshow that includes navigation dots at the bottom. Although the slideshow is functioning properly, I am encountering an issue where only one dot appears instead of the intended three in a row. Despite my research and att ...

"Bootstrap-Wizard: How to troubleshoot the onPrevious function not working when used with an

I have been incorporating a bootstrap wizard into one of my applications, and I have encountered an issue. When attempting to utilize the index position of the tabs to achieve a specific goal, I found that it only works with the next button and not with th ...

There seems to be an issue as the function reporter.beforeLaunch cannot be identified and

I am currently attempting to incorporate the protractor screenshot reporter for jasmine 2. However, I encountered the following error in the terminal: /usr/local/bin/node lib/cli.js example/conf.js /Users/sadiq/node_modules/protractor/node_modules/q/q.j ...

Personalized Facebook Share Dialog - unique title and description

I need to send a link using the FB Send Dialog with custom name and description. FB.ui({ method: 'send', name: 'Custom name', display: 'popup', link: 'http://link.com', to: facebookUserId, description: 'Custom ...

The pencil-drawn pixel on the canvas is positioned off-center

Currently, I am using p5.js to draw pixels on canvas with a pencil tool. However, I have encountered an issue where the pixel does not appear centered when the size of the pencil is set to 1 or smaller. It seems to be offset towards the left or right. Upo ...

Trouble arises when emitting events in Vue using eventHub

In the development of my component, there arises a need to emit an event at a specific point in its lifecycle. This emitted event is intended to be listened to by another sibling component. To facilitate this communication, I am utilizing an event hub. H ...

Testing with Jest in JavaScript shows the failure of a previously passing test when an object is moved to an external helper function

During my test setup, I initialize a player object in the beforeEach block. Within my test logic, every time I call jest.advanceTimersByTime(2001), the player.seekable.mock.calls count increases. As such, given that I make two calls to jest.advanceTimersBy ...

Tips for transferring information from ng-view to the navbar on the index.html page using AngularJS

Recently, I embarked on a journey to learn the MEAN stack and decided to challenge myself by building an authentication page from scratch instead of using the out-of-the-box solution. My main struggle lies in updating texts on my navbar. Here's a snip ...

Reorder data in an array using a specific field in AngularJS

I am working with an array that looks like this: [Object,Object,Object]; Each object in the array has a property named "rate". I need to sort these objects based on their rate property. In my JavaScript, I have a variable called $scope.restaurants.data, ...

The request is not functioning as expected for some reason

My current challenge involves retrieving photos from Instagram using a GET request. I attempted to use jQuery.get(), which has been successful for other types of GET requests but not for Instagram. Despite trying to switch to jQuery.getJSON(), the issue pe ...

JS Data error: The attributes provided must include the property indicated by idAttribute - particularly with regards to hasMany relationships

Encountered Error: The main key for my user model is username. The primary key for my routes is the routename. When my API returns JSONs, they are nested inside data:{} following jsonapi.org specifications. However, this structure differs from what js-dat ...

Utilizing Vue JS methods to control a div element

Currently enrolled in an online coding course that utilizes a bot to check code for accuracy. The task at hand is to modify the following code... <div id="app"> <form @submit.prevent="onSubmit"> <input v-model="userName"> < ...

Experiment with parsing multiple outputs instead of repeatedly coding them as constants in Node.js

In my application, I am parsing multiple database data using cron and currently, I have it set up to create a const run for each data to find the dag_id and manually test the determineCron function one at a time. How can I create an array so that the "dete ...

Trigger Modal using PHP/JavaScript

After implementing the code below on my page, I expected guests to be redirected to the main page post login and greeted with a small pop-up modal containing a thank you message. However, despite trying multiple variations of this code, it doesn't see ...

What is the best way to incorporate six rows of paragraphs using bootstrap?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" con ...

Populate an ng-repeat table again while maintaining its original sorting order

Incorporating a table filled with data fetched from a webservice using the ng-repeat directive, I have enabled sorting functionality for all columns. Additionally, at regular intervals, the application polls the webservice to retrieve updated data. This o ...

Using javascript, what is the best way to clear a text field with a specific condition?

When I clear the text field #t1, I expect text field #d1 to also clear. However, the last two lines of code do not achieve this result. function utl() { var tField = document.getElementById('t1'); var dField = document.getElementById(&a ...

I can't seem to figure out why this isn't functioning properly

Upon examining the script, you'll notice the interval() function at the very bottom. The issue arises from bc-(AEfficiency*100)/5; monz+((AEfficiency*100)/5)((AFluencyAProduct)/100); For some reason, "bc" and "monz" remain unchanged. Why is that so? T ...

Expanding the width of CSS dropdown menus according to their content

When attempting to create a dynamic dropdown menu, I encountered an issue where the values were skewed in Internet Explorer if they exceeded the width of the dropdown. To fix this problem, I added select:hover{width:auto;position:absolute}. However, now th ...