Question

我试图从jQuery转向Vue 2.0，在大多数情况下，过渡感觉非常容易。

然而，当进行AJAX调用并与响应交互时，我接近错误，我无法进入Vue做事的心态。

例如，我有一个＆＃34;模态触发器＆＃34;单击时打开一个模态窗口并对绑定到触发器的href进行AJAX调用，然后将html返回到模式中的v-html。我的问题出现在我希望在模态中有一个@click事件时，显然它不起作用，因为Vue没有注册它，这是有道理的。

在jQuery中我可以说例如$（document）.on（＆＃39;点击＆＃39; ...以便它可以识别任何加载了AJAX的页面，我无法在Vue中找到类似的选项，我明显地接近了这种情况。

我花了好几个小时寻找解决方案而我没有进一步前进，任何有类似情况经验的人都可以让我知道他们是如何克服他们的问题或指出我的教学方向有类似的问题。

提前谢谢。

Answer 1

您需要conditional rendering。重点是，模板不是有条件的，数据是。因此@click实际上始终在您的模板中，但随着数据的更改，您可以在视图中看到不同的视图，甚至是不同的用户交互行为。

您想要一个按钮，但只有当某个条件flag为真时，所以在data选项中，flag最初为false，但您从中加载了真实状态服务器通过AJAX调用，可以将flag设置为true，以便按钮显示。模板可能类似于<button v-if="flag" @click="clicked"></button>
你总是想要一个按钮，但点击它并不总是做某事（例如显示警告），所以<button @click="clicked"></button>和if(this.flag) {/*do something*/}在{{1}虽然如上所述由AJAX加载clicked。

Answer 2

我相信通过使用＆＃34; Dynamic components＆＃34;我找到了一个很好的解决方案。 - 我已经构建了一个基本示例，它基于按钮单击加载到不同的组件中，对php脚本进行AJAX调用以更新新组件按钮触发的警报消息。

这是我的代码：

的script.js

Vue.component('foo', {
  'template' : '<button @click="aFooButton()">This is a foo button</button>',

  data() {
    return {

    }
  },

  methods: {

    aFooButton() {
      alert(this.$parent.componentData);
    }

  }
})



Vue.component('bar', {
  'template' : '<button @click="aBarButton()">This is a bar button</button>',

  data() {
    return {

    }
  },

  methods: {

    aBarButton() {
      alert(this.$parent.componentData);
    }

  }
})



new Vue({
  el : "#root",

  data : {
    component: null,
    componentData: null
  },

  methods : {

    makeFoo() {
      axios.get('ajax/foo.php').then(response => this.componentData = response.data);
      this.component = 'foo';
    },

    makeBar() {
      axios.get('ajax/bar.php').then(response => this.componentData = response.data);
      this.component = 'bar';
    }

  },

  mounted() {

  }


})



Vue.component('bar', {
  'template' : '<button @click="aBarButton()">This is a bar button</button>',

  data() {
    return {

    }
  },

  methods: {

    aBarButton() {
      alert(this.$parent.componentData);
    }

  }
})



new Vue({
  el : "#root",

  data : {
    component: null,
    componentData: null
  },

  methods : {

    makeFoo() {
      axios.get('ajax/foo.php').then(response => this.componentData = response.data);
      this.component = 'foo';
    },

    makeBar() {
      axios.get('ajax/bar.php').then(response => this.componentData = response.data);
      this.component = 'bar';
    }

  },

  mounted() {

  }


})

的index.html

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Vue</title>

</head>

<body id="app">

  <div id="root" class="container">

      <div>
          <component :is="component"></component>
      </div>

      <div>
          <button @click="makeFoo()">Make foo</button>
          <button @click="makeBar()">Make bar</button>
      </div>

  </div>



  <script src="ajax/javascript/vue.js"></script>
  <script src="ajax/javascript/axios.js"></script>
  <script src="ajax/javascript/script.js"></script>
</body>
</html>

foo.php

<?php
  header('Content-Type: application/json');
  echo json_encode('This is some Foo information');
 ?>

bar.php

<?php
  header('Content-Type: application/json');
  echo json_encode('This is some Bar information');
 ?>

在我看来这是一个很好的解决方案，任何人都可以告诉我是否有任何理由我不应该使用这种方法解决我的问题？

（请注意这是一个基本的例子，我通常将我的组件放在单独的文件中等）

提前致谢

编辑：

进一步阅读我发现＆＃34; Vue Router＆＃34;这似乎提供了类似于我上面所取得的解决方案 - 有没有人有这方面的经验，这是一个更好的选择吗？

编辑2：

我决定使用Vue Router重新创建上述代码，感兴趣的人的代码是：

的index.html

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Vue</title>


</head>

<body id="app">

  <div id="root" class="container">

    <div>
        <router-link to="/foo">Go to Foo</router-link>
        <router-link to="/bar">Go to Bar</router-link>
    </div>

    <div>
        <router-view></router-view>
    </div>

  </div>



  <script src="router/javascript/vue.js"></script>
  <script src="router/javascript/router.js"></script>
  <script src="router/javascript/axios.js"></script>
  <script src="router/javascript/script.js"></script>
</body>
</html>

的script.js

const Foo = Vue.component('foo', {
  'template' : '<button @click="aFooButton()">This is a foo button</button>',

  data() {
    return {

      loading: false,
      message: null,
      error: null

    }
  },

  created () {
    // fetch the data when the view is created and the data is
    // already being observed
    this.fetchData()
  },
  watch: {
    // call again the method if the route changes
    '$route': 'fetchData'
  },

  methods: {

    fetchData () {
      this.error = this.post = null
      this.loading = true

      axios.get('async-ajax/foo.php').then((response) => {
        this.message = response.data;
      });

    },

    aFooButton() {
      alert(this.message);
    }


  }

})



const Bar = Vue.component('bar', {
  'template' : '<button @click="aBarButton()">This is a bar button</button>',

  data() {
    return {

      loading: false,
      message: null,
      error: null

    }
  },

  created () {
    // fetch the data when the view is created and the data is
    // already being observed
    this.fetchData()
  },
  watch: {
    // call again the method if the route changes
    '$route': 'fetchData'
  },

  methods: {

    fetchData () {
      this.error = this.post = null
      this.loading = true

      axios.get('async-ajax/bar.php').then((response) => {
        this.message = response.data;
      });

    },

    aBarButton() {
      alert(this.message);
    }


  }


})

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

const router = new VueRouter({
  routes: routes
})

new Vue({
  el : "#root",

  router: router,


})

根据我的经验，Vue Router更适合单页应用程序，它会更新浏览器中的URL等，因为我觉得Dynamic Components更符合我的个人需求。我有兴趣听取其他人的意见和经验。

Vue v-bind和AJAX

2 个答案: