ajax - How can I get @click or v-on to work with dynamically loaded data with VueJS?

So I have a div...

<div id="holdmailings">
            
          </div>

when I click on a menu item I'm loading this into the DIV with an @Click on a menu item...

if (msg == 'mailings'){
            document.getElementById("listofmailings").style.display = 'block';
            document.getElementById("mainquote").style.display = 'none';
            document.getElementById("displaymailing").style.display = 'block';
            document.getElementById("signup").style.display = 'none';
            axios.get('http://localhost:8081/getcampaigns')
        .then(response => {
            document.getElementById("holdmailings").innerHTML= '';
            for (let i = 0; i < response.data.length; i++) {
                document.getElementById("holdmailings").innerHTML += '<div class="row"><div class="col-10" @click="setPermalink(\''+response.data[i].permalink+'\')">' 
                +response.data[i].title + '</div><div class="col-2">'+response.data[i].createdate+'</div></div>';
            }

I know I'm doing this wrong because the @Click whic his geting returned is not "rendering" so the items which get back are not "clickable" ... what is the proper way to achieve this?

I was thinking maybe data binding? however not sure how to implement this.

NEWER CODE

<template>
     <div class="container">
      <div id="holdif"><Menus></Menus></div>
      <div class="row mb-2">
        <div class="col-lg-6">
          <div id="listofmailings" class="col-lg-12 bg-white mt-1">
            <div class="row"><div class="col-10">EMAIL SUBJECT</div><div class="col-2" style="text-align: center">DATE</div></div>
        <div class="row" v-for="item in mailings" :key="item.id">
            <div class="col-10" @click="openLink(item.permalink)">{{ item.title }}</div>
            <div class="col-2">{{ item.createdate }}</div>
        </div>
          </div>
          <div id="mainquote" class="col-lg-12 bg-white mt-1">
            Know your Town... Really know your town
          
        </div>
        <div class="col-lg-6 ">
          <div class="col-lg-12  bg-white mt-1">
            <div id="displaymailing">Peralink</div>
            </div>
<!-- Begin Constant Contact Inline Form Code -->
<div id="signup" class="ctct-inline-form" data-form-id="81c108fd-ee02-47f6-aaf3-bbe3643e328b"></div>
<!-- End Constant Contact Inline Form Code -->

          </div>  
      </div>
    </div>
  </div>
</template>

<script>
import Mailings from '../components/Mailings.vue';
import Menus from '../components/Menus'
import axios from 'axios';
import {ref} from 'vue';

const mailings = ref([]);
const msg = 'mailings';


export default {
  name: 'Home',
  components: {
    Menus,Mailings
  },
  methods: {
    doaction(msg){
        if (msg == 'home'){
            document.getElementById("listofmailings").style.display = 'none';
            document.getElementById("mainquote").style.display = 'block';
            document.getElementById("displaymailing").style.display = 'none';
            document.getElementById("signup").style.display = 'block';
        }
        if (msg == 'mailings'){
            document.getElementById("listofmailings").style.display = 'block';
            document.getElementById("mainquote").style.display = 'none';
            document.getElementById("displaymailing").style.display = 'block';
            document.getElementById("signup").style.display = 'none';
            axios.get('http://localhost:8081/getcampaigns')
        .then(response => {
            mailings.value = response.data;
            console.log(response.data);
            console.log(response.data.length);
            console.log(typeof(response.data));
            console.log('teseting');
            console.log(mailings.value);
        })
        .catch(e => {
            alert('this'+e)
            console.log(e)
        })
        }
    
    }
  },
  created() {
    
}

}
</script>

The console logs play out like

[{…}]

1

object

teseting

Proxy(Array) {0: {…}}

So I have a div...

<div id="holdmailings">
            
          </div>

when I click on a menu item I'm loading this into the DIV with an @Click on a menu item...

if (msg == 'mailings'){
            document.getElementById("listofmailings").style.display = 'block';
            document.getElementById("mainquote").style.display = 'none';
            document.getElementById("displaymailing").style.display = 'block';
            document.getElementById("signup").style.display = 'none';
            axios.get('http://localhost:8081/getcampaigns')
        .then(response => {
            document.getElementById("holdmailings").innerHTML= '';
            for (let i = 0; i < response.data.length; i++) {
                document.getElementById("holdmailings").innerHTML += '<div class="row"><div class="col-10" @click="setPermalink(\''+response.data[i].permalink+'\')">' 
                +response.data[i].title + '</div><div class="col-2">'+response.data[i].createdate+'</div></div>';
            }

I know I'm doing this wrong because the @Click whic his geting returned is not "rendering" so the items which get back are not "clickable" ... what is the proper way to achieve this?

I was thinking maybe data binding? however not sure how to implement this.

NEWER CODE

<template>
     <div class="container">
      <div id="holdif"><Menus></Menus></div>
      <div class="row mb-2">
        <div class="col-lg-6">
          <div id="listofmailings" class="col-lg-12 bg-white mt-1">
            <div class="row"><div class="col-10">EMAIL SUBJECT</div><div class="col-2" style="text-align: center">DATE</div></div>
        <div class="row" v-for="item in mailings" :key="item.id">
            <div class="col-10" @click="openLink(item.permalink)">{{ item.title }}</div>
            <div class="col-2">{{ item.createdate }}</div>
        </div>
          </div>
          <div id="mainquote" class="col-lg-12 bg-white mt-1">
            Know your Town... Really know your town
          
        </div>
        <div class="col-lg-6 ">
          <div class="col-lg-12  bg-white mt-1">
            <div id="displaymailing">Peralink</div>
            </div>
<!-- Begin Constant Contact Inline Form Code -->
<div id="signup" class="ctct-inline-form" data-form-id="81c108fd-ee02-47f6-aaf3-bbe3643e328b"></div>
<!-- End Constant Contact Inline Form Code -->

          </div>  
      </div>
    </div>
  </div>
</template>

<script>
import Mailings from '../components/Mailings.vue';
import Menus from '../components/Menus'
import axios from 'axios';
import {ref} from 'vue';

const mailings = ref([]);
const msg = 'mailings';


export default {
  name: 'Home',
  components: {
    Menus,Mailings
  },
  methods: {
    doaction(msg){
        if (msg == 'home'){
            document.getElementById("listofmailings").style.display = 'none';
            document.getElementById("mainquote").style.display = 'block';
            document.getElementById("displaymailing").style.display = 'none';
            document.getElementById("signup").style.display = 'block';
        }
        if (msg == 'mailings'){
            document.getElementById("listofmailings").style.display = 'block';
            document.getElementById("mainquote").style.display = 'none';
            document.getElementById("displaymailing").style.display = 'block';
            document.getElementById("signup").style.display = 'none';
            axios.get('http://localhost:8081/getcampaigns')
        .then(response => {
            mailings.value = response.data;
            console.log(response.data);
            console.log(response.data.length);
            console.log(typeof(response.data));
            console.log('teseting');
            console.log(mailings.value);
        })
        .catch(e => {
            alert('this'+e)
            console.log(e)
        })
        }
    
    }
  },
  created() {
    
}

}
</script>

The console logs play out like

[{…}]

1

object

teseting

Proxy(Array) {0: {…}}

Share Improve this question edited Mar 4 at 2:03 asked Mar 3 at 16:35 BostonAreaHuman 1,4693 gold badges22 silver badges44 bronze badges

Add a comment |

2 Answers 2

Sorted by: Reset to default 1

If you are using the Vue Composition API, you can initialize an empty array of data as a Vue ref, then assign the value within your Axios request.

Here is an example of how you would create a Vue template and dynamically render the data into separate rows.

<script setup>
  import { ref } from 'vue';

  // Create an empty data array
  const data = ref([]);
  const msg = 'mailings';

  // Get campaigns from axios
  if (msg == 'mailings') {
    axios.get('http://localhost:8081/getcampaigns')
    .then(response => {
      data.value = response.data;
    });
  }

  function openLink(url) {
    window.location.href = url;
  }
</script>

<template>
  <div id="listofmailings" v-if="msg == 'mailings'">List of Mailings</div>

  <div id="holdmailings">
    <div class="row" v-for="item in data">
      <div class="col-10" @click="openLink(item.permalink)">{{ item.title }}</div>
      <div class="col-2">{{ item.createdate }}</div>
    </div>
  </div>
</template>

Notice how we render each item from the data array using the v-for loop. Assuming the response.data is an array, this should render your component as expected.

If Axios is returning a string, you can parse the response data using JSON.parse(response.data).

@click is handled by the compiler and template compilation, so the binding of the event handler won't work.

Why not do all of this logic inside vue.js and components? Fetch the data in a wrapper component and render conditionally whatever you're tryin to do.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

ajax - How can I get @click or v-on to work with dynamically loaded data with VueJS? - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)