How dynamic data to call framework7-vue method

Questions
1

I have template like this
< template>
< f7-tab id=“tab-1” class=“page-content” tab-active>
< f7-block>
< span id=“spanid”>
< /f7-block>
< /f7-tab>
< f7-tab id=“tab-2” class=“page-content”>
< f7-block>
< span @click=“playSentence(1)”> halo< /span> // it calls correctly
< /f7-block>
< /f7-tab>
< /template>
On page init,
const self = this;
const $ = self.$$;
self.$$(’#spanid’).html(xxxxxx);
xxx = dynamic data from ajax response, and will contain data like <span @click=“playSentence(1)”> halo< /span>, but it seems it never called playSentence method

it only works if the data call javascript global function like '< span onclick=“playSentence(1)”>halo< /span>

how to address it ?

2

hi, can you share your code well formatted?
its difficult to undestand it and therefore help you
if thats your code, you are missing the scriot tag + retun

<script>
  export default {
    name: 'my view',
    data () { return {...} },
    methods: {
      playSentence (val) {
        alert(val)
      }
    }
  }
</script>

just wrap your code in three ticks like this  ``` your code Here ```
3

Basically, I have three tabs,

  1. the third tab, can call method correctly (no problem here)
  2. the first tab, i will fill “spanid” with dynamic data (which simulates like the third tab)
    <f7-tabs swipeable>
      <f7-tab id="tab-1" class="page-content" tab-active>
        <f7-block>
          <br><br><span id="spanid" class="characterruby"></span>
        </f7-block>
      </f7-tab>
      <f7-tab id="tab-2" class="page-content">
        <f7-block>
          <br><br><span id="spanid2" class="characterruby">
          </span>
        </f7-block>
      </f7-tab>
      <f7-tab id="tab-3" class="page-content">
        <f7-block><br><br><br>
          <span id="spanid3" class="characterruby" @click="playSentence(1)"> halo</span>
          </span>
        </f7-block>
      </f7-tab>
    </f7-tabs>


<script>
  export default {
    data() {
      return {
      };
    },
    methods: {
      playSentence(num) {
        alert(1);
      },
      onPageInit() {
        const self = this;
        const app = self.$f7;
        const $ = self.$$;
        self.$$('#spanid').html('<span @click="playSentence(1)"> halo</span>');
        // the problem in the above code, it will display , but the click event doesn't work

      }
    }
 }
</script>
4

ok i see. you cant add click events to custom html and listen theme with f7 or vue.
Maybe you can listen to the parent click, and in the event look if (’#spanid’) was clicked

1 Like
5

ok. thanks for your response