Question

我正在使用 FrameWork7 Vue （https://framework7.io/vue/），我遇到以下问题：

你为什么不让我改变＆＃34; Dispositivo ＆＃34;的价值？

＆＃34; v-model＆＃34; 在FrameWork7 Vue中有效吗？

的index.html：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!--
  Customize this policy to fit your own app's needs. For more guidance, see:
      https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
  Some notes:
      * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
      * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
      * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
          * Enable inline JS: add 'unsafe-inline' to default-src
  -->
  <meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="default">
  <meta name="theme-color" content="#2196f3">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <title>My App</title>
  <link rel="stylesheet" href="libs/framework7/css/framework7.min.css">
  <link rel="stylesheet" href="css/icons.css">
  <link rel="stylesheet" href="css/app.css">
</head>
<body>
  <div id="app">
    <!-- Statusbar -->
    <f7-statusbar></f7-statusbar>

    <!-- Right Panel -->
    <f7-panel right cover theme-dark>
      <f7-view id="right-panel-view">
        <f7-page>
          <f7-navbar title="Right Panel" sliding></f7-navbar>


          <f7-list>
            <f7-list-item link="/conf/" title="conf" view="#main-view" panel-close></f7-list-item>
          </f7-list>
        </f7-page>
      </f7-view>
    </f7-panel>

    <!-- Main View -->
    <f7-view id="main-view" main>
      <f7-page>
        <f7-navbar>
          <f7-nav-left>
            <f7-link icon-if-ios="f7:menu" icon-if-md="material:menu" panel-open="left"></f7-link>
          </f7-nav-left>
          <f7-nav-title>My App</f7-nav-title>
          <f7-nav-right>
            <f7-link icon-if-ios="f7:menu" icon-if-md="material:menu" panel-open="right"></f7-link>
          </f7-nav-right>
        </f7-navbar>

        <f7-toolbar tabbar>
          <f7-link tab-link="#tab1">Tab 1</f7-link>
          <f7-link tab-link="#tab2">Tab 2</f7-link>
        </f7-toolbar>

        <f7-tabs>
          <f7-tab id="tab1" tab-active>Tab 1 content...</f7-tab>
          <f7-tab id="tab2">Tab 2 content...</f7-tab>
        </f7-tabs>
        <!-- <f7-block strong>
          <p>Here is your blank Framework7 app. Let's see what we have here..</p>
        </f7-block> -->




      </f7-page>
    </f7-view>




  </div>



  <!-- Form Page Template -->
  <!--<template id="page-form">
  </template>-->




  <!-- Cordova -->
  <!--
  <script src="cordova.js"></script>
  -->

  <!-- Framework7 library -->
  <script src="libs/framework7/js/framework7.min.js"></script>

  <!-- Vue -->
  <script src="libs/vue/vue.min.js"></script>


  <!-- Framework7-Vue plugin -->
  <script src="libs/framework7-vue/framework7-vue.min.js"></script>

  <!-- Your custom app scripts -->
  <script src="js/app.js"></script>
  <script src="js/conf.js"></script>
</body>
</html>

app.js：

// Init F7 Vue Plugin
Vue.use(Framework7Vue, Framework7)

// Init Page Components

// Init App
new Vue({
  el: '#app',
  // Init Framework7 by passing parameters here
  framework7: {
    root: '#app', // App root element
    id: 'io.framework7.testapp', // App bundle ID
    name: 'Framework7', // App name
    theme: 'auto', // Automatic theme detection
    // App routes
    routes: [
      {
        path: '/conf/',
        component: 'conf'
      }
    ],
  }
});

没关系？

conf.js：

Vue.component('conf',{
    template:`

    <f7-page>
      <f7-navbar title="Form" back-link="Back"></f7-navbar>
      <f7-block-title>Form Example</f7-block-title>
      <f7-list form>
        <f7-list-item>
          <f7-label>Dispositivo: {{dispositivo}}</f7-label>
          <f7-input type="text" name='dispositivo' placeholder="Dispositivo" v-model='dispositivo'></f7-input>
        </f7-list-item>  
      </f7-list>
    </f7-page>

    `,
    mounted(){
        console.log("Dispositivo: ",this.dispositivo)
    },
    data(){
        return{
            //Servidor de datos.
            dispositivo:'servidor', //Variable para saber de que dispositivo obtengo las coordenadas.
        }
    },
    methods:{
    }
});

v-model不起作用，我在更改值时收到以下消息：

[object InputEvent]

Answer 1

我遇到了完全相同的问题。当我使用framework7@1.6.5 + framework7-vue@0.9.4时，它运作良好。但是在我将它们升级到framework7@2.0.7 + framework7-vue@2.0.7之后，每次我尝试用v-model输入内容时，它都会弹出[object InputEvent]。这似乎是framework7-vue v2与vue.js之间的兼容性问题。

我终于在framework7论坛上找到了答案。它说framework7-vue 2.0不再支持v-model。链接在这里： How to use use v-model for f7-input?

根据这个建议，这是我的解决方案，它在我身边很有效。

我在登录表单上工作，这里是v-model用户名的输入标签：

<f7-login-screen-title>Login</f7-login-screen-title>
<f7-list form>
<f7-list-item>
    <f7-label>Username</f7-label>
    <f7-input v-model="username" name="username" type="text" placeholder="" clear-button></f7-input>
</f7-list-item>
<f7-list-item>
    <f7-label>Password</f7-label>
    <f7-input v-model="password" type="password" placeholder="" clear-button></f7-input>
</f7-list-item>
</f7-list>
<f7-list>
<f7-list-button login-screen-close @click="login">Login</f7-list-button>
</f7-list>

这是我根据建议修改的，它运作得很好。

<f7-login-screen-title>Login</f7-login-screen-title>
<f7-list form>
<f7-list-item>
    <f7-label>Username</f7-label>
    <f7-input :value="username" @input="username=$event.target.value" name="username" type="text" placeholder="" clear-button></f7-input>
</f7-list-item>
<f7-list-item>
    <f7-label>Password</f7-label>
    <f7-input :value="password" @input="password=$event.target.value" type="password" placeholder="" clear-button></f7-input>
</f7-list-item>
</f7-list>
<f7-list>
<f7-list-button login-screen-close @click="login">Login</f7-list-button>
</f7-list>

希望这可以提供帮助。

错误：Framework7 Vue中的v-model [object InputEvent]

1 个答案: