logo
down
shadow

vueJS hide element in dynamic table row


vueJS hide element in dynamic table row

By : Mike Lopez
Date : November 22 2020, 03:01 PM
With these it helps Can be done this way using v-show directive.
code :
new Vue({
  el: '.table',
  data: {
    rows: [
      { showTitle: true, job: 'A' },
      { showTitle: true, job: 'B' },
      { showTitle: true, job: 'C' }
    ]
  }
});
<script src="https://unpkg.com/vue@2.5.2/dist/vue.min.js"></script>

<table class="table">
  <thead>
    <tr>
      <td><strong>Title</strong></td>
      <td><strong>Job</strong></td>
      <td></td>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(row, index) in rows">
      <td><p v-show='row.showTitle' class="title">My title</p></td>
      <td><input type="text" v-model="row.job"></td>
      <td><a @click="row.showTitle = false">Remove title</a></td>
    </tr>
  </tbody>
</table>
new Vue({
  el: '.table',
  data: {
    rows: [
      { job: 'A' },
      { job: 'B' },
      { job: 'C' }
    ]
  },
  methods: {
    hideTitle(index) {
      $(this.$refs['title' + index]).hide();
    }
  }
});
<script src="https://unpkg.com/vue@2.5.2/dist/vue.min.js"></script>
<script src="https://unpkg.com/jquery@3.2.1/dist/jquery.min.js"></script>

<table class="table">
  <thead>
    <tr>
      <td><strong>Title</strong></td>
      <td><strong>Job</strong></td>
      <td></td>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(row, index) in rows">
      <td><p class="title" :ref="'title' + index">My title</p></td>
      <td><input type="text" v-model="row.job"></td>
      <td><a @click="hideTitle(index)">Remove title</a></td>
    </tr>
  </tbody>
</table>


Share : facebook icon twitter icon
Passing dynamic styles to my element in VueJS

Passing dynamic styles to my element in VueJS


By : Cash Back
Date : March 29 2020, 07:55 AM
hope this fix your issue I am trying to make a type of progress bar to track a percentage of tasks completed. I want to v-bind:styles and pass it {width: dynamicWidth + '%'} in order to control the progression of this bar. So far I have created a computed variable that will return the percentage complete I want to bar to display, and I have set up my dynamic style in the data object , why not just use :
code :
  <div id="trackerBarActual" v-bind:style="barWidthCalculated">

  computed: {
    barWidthCalculated: function(){
      return {
        width: (this.numQuotes * 10) + '%', 
        color: 'red' 
      };
    }
Adding mouse event to dynamic created element Vuejs

Adding mouse event to dynamic created element Vuejs


By : Pat Philipsek
Date : March 29 2020, 07:55 AM
I wish did fix the issue. I was just wondering have anyone tried doing something like this(this is within a vuejs created method): , The problem:
Let's look at the problematic line:
code :
bar.setAttribute("mouseover", this.showBlock(500, false));
bar.setAttribute("onmouseover", "app.showBlock(500, false)");
bar.addEventListener("mouseover", function () { app.showBlock(500, false); });
<div class="bar">
  <div v-for="i in items" :class="i.colour" :style="{ width: i.weight + '%' }" @mouseover="showBlock(500, false)"></div>
</div>
dynamic countdown on table rows with vuejs

dynamic countdown on table rows with vuejs


By : user3137617
Date : March 29 2020, 07:55 AM
this one helps. Here is one way of doing it: https://jsfiddle.net/fzr36qwc/1/
Basically, I'm setting a countdown field for each row. Then, I use setInterval to update those values periodically.
code :
new Vue({
  el: '#q-app',
  props:[
  'datam'
  ],
  data: function () {
    return {
      data: [
        {
          name: 'calories',
          calories: 159,
          fat: 6.0,
          carbs: 24,
          tarih: "2020-11-11",
          sodium: 87,
          calcium: '14%',
          iron: '1%',
          countdown: null,
        },
        {
          name: 'fat',
          calories: 237,
          fat: 9.0,
          carbs: 37,
          tarih: "2020-11-11 11:00",
          sodium: 129,
          calcium: '8%',
          iron: '1%',
          countdown: null,
        },
        {
          name: 'carbs',
          calories: 518,
          fat: 26.0,
          carbs: 65,
          tarih: "2020-11-11 11:00",
          sodium: 54,
          calcium: '12%',
          iron: '6%',
          countdown: null,
        },
        {
          name: 'protein',
          calories: 305,
          fat: 3.7,
          carbs: 67,
          tarih: "2020-11-11 11:00",
          sodium: 413,
          calcium: '3%',
          iron: '8%',
          countdown: null,
        }
      ],
      // date:moment(now).format('YYYY-MM-DD HH:mm'),
      columns: [

        { name: 'calories', align: 'center', label: 'Calories', field: 'calories', sortable: true },
        { name: 'fat', label: 'Fat (g)', field: 'fat', sortable: true },
        { name: 'carbs', label: 'Carbs (g)', field: 'carbs' },
        { name: 'tarih', label: 'Protein (g)', field: 'countdown'},
      ],
    }
  },
  methods:{
    updateCountdowns() {
      Object.values(this.data).forEach(row => {
        let datem = moment(row.tarih).format('YYYY-MM-DD HH:mm');
        row.countdown = countdown(new Date(datem).getTime()).toString();
      })
    }
  },
  mounted(){
    // Update once at the beginning
    this.updateCountdowns()
    // Then update each second
    setInterval(this.updateCountdowns, 1000)
  }
})

How to use v-show with dynamic element in Vuejs

How to use v-show with dynamic element in Vuejs


By : user3392235
Date : March 29 2020, 07:55 AM
wish of those help Why don't you try organising the show_ in an object instead of a flat list of properties?
https://codesandbox.io/embed/vue-template-csncc?fontsize=14&hidenavigation=1&theme=dark
Vuejs, Dynamic b-table with editable fields and two-way databinding

Vuejs, Dynamic b-table with editable fields and two-way databinding


By : user3683962
Date : March 29 2020, 07:55 AM
it fixes the issue I'm trying to generate a dynamic b-table with editable fields and with two-way databinding. , If you want to have ALL fields editable, you can use this syntax.
code :
<template v-slot:cell()="{ item, field: { key } }">
  <b-form-input v-model="item[key]" />
</template>
new Vue({
  el: "#app",
  computed: {
    editableFields() {
      return this.fields.filter(field => field.editable)
    }
  },
  data: {
    filtered: [
      { 
        "id": "1",
        "issueDescription": "this is a description", 
        "endTime": "2020-02-11T14:00:00.000Z", 
        "startTime": "2020-02-11T01:24:00.000Z" 
      },
      { 
        "id": "2",
        "issueDescription": "this is a description", 
        "endTime": "2020-02-11T14:00:00.000Z", 
        "startTime": "2020-02-11T01:24:00.000Z" 
      }
    ],
    fields: [
      { key: 'id', label: 'ID' },
      { key: 'issueDescription', label: 'Issue Description', editable: true },
      { key: 'startTime', label: 'Start Time', editable: true },
      { key: 'endTime', label: 'End Time', editable: true }
    ]
  }
})
<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue@2.4.1/dist/bootstrap-vue.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.4.1/dist/bootstrap-vue.min.js"></script>

<div id='app'>
  <b-table :items="filtered" :fields="fields">
    <template v-for="field in editableFields" v-slot:[`cell(${field.key})`]="{ item }">
      <b-input v-model="item[field.key]"/>
    </template>
  </b-table>
</div>
Related Posts Related Posts :
  • How can I put toast messages in a separate file when unsing Vue.js
  • Why must vue component data be a function?
  • How can I make in array in vue component?
  • Vue-router: beforeEnter guard doesn’t work properly for children path
  • Importing store into a lib.js while using vuex with SSR
  • Remove listing from Vuejs1 vs Vuejs2
  • Difference between .$mount() and el [Vue JS]
  • How to display card components in loop with Vuetify grid system?
  • Execute custom functions one after another - Callback logic in Vue.js
  • Vue.js: how to display the <br> element from the data property
  • Chain requests to the server in Vue.js
  • Vue.js - data in component instead of a generated modal
  • Create a div using vue.js
  • Cannot read property 'property_name' of undefined
  • Vue.js cycle does not work
  • Vue.js change placeholder of text input according to v-model value
  • ViewBag.Title from Vue router
  • VueJS GET request with Bearer token
  • Wait for multiple images to load
  • How to resize the image in vue
  • v-html with conditional rendered
  • Vuetify v-flex width specifications
  • Vuetify / Offline icons
  • How to add Matomo tracking code in VueJS Single Page Apps?
  • Access vue js data with axios post form symfony
  • Using paperjs on a vuejs project based on SFC
  • Vue Component prop in vuetify component
  • shadow
    Privacy Policy - Terms - Contact Us © voile276.org