Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>https://github.com/vuejs/vue/issues/12245</title>
    <!-- <script src="https://unpkg.com/vue@2.6.14"></script> -->
    <script src="https://cdn.jsdelivr.net/gh/JuniorTour/jsdelivr-cdn/vue-fix-12245&&122232.js"></script>
</head>
<body>
​
<div id="app">
  <div>count: {{ counter }}</div>
  <button @click="submit">increment</button>
  <foo> count: {{ counter }} </foo>
</div>
​
<script>
  Vue.component('foo', {
    template: `
      <with-content-slot-one>
        <template #content>
          <with-content-slot-two>
            <template #content>
              inner slot:
              <slot />
            </template>
          </with-content-slot-two>
        </template>
      </with-content-slot-one>
  `,
    // data() {},
  });
​
  Vue.component('WithContentSlotOne', {
    template: `
  <div>
    <slot name="content" />
  </div>
  `
  });
​
  Vue.component('WithContentSlotTwo', {
    template: `
  <div>
    <slot name="content" />
  </div>
  `
  });
​
  new Vue({
    el: "#app",
    data() {
      return {
        counter: 0,
      };
    },
    methods: {
      submit() {
        debugger
        this.counter++
      },
    },
  })
</script>
</body>
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
JuniorTourpro
0viewers