Home Php C# Sql C C++ Javascript Python Java Go Android Git Linux Asp.net Django .net Node.js Ios Xcode Cocoa Iphone Mysql Tomcat Mongodb Bash Objective-c Scala Visual-studio Apache Elasticsearch Jar Eclipse Jquery Ruby-on-rails Ruby Rubygems Android-studio Spring Lua Sqlite Emacs Ubuntu Perl Docker Swift Amazon-web-services Svn Html Ajax Xml Java-ee Maven Intellij-idea Rvm Macos Unix Css Ipad Postgresql Css3 Json Windows-server Vue.js Typescript Oracle Hibernate Internet-explorer Github Tensorflow Laravel Symfony Redis Html5 Google-app-engine Nginx Firefox Sqlalchemy Lucene Erlang Flask Vim Solr Webview Facebook Zend-framework Virtualenv Nosql Ide Twitter Safari Flutter Bundle Phonegap Centos Sphinx Actionscript Tornado Register | Login | Edit Tags | New Questions | 繁体 | 简体


10 questions online user: 20

0
votes
answers
28 views
+10

vue.js中路由器之間的同步變量

0

我想通過同步更改不同routre-view中的其他變量來更改router-view中某個變量的值。我編寫了如下代碼來更改頭文件中的變量isFoo並在側欄中捕獲它,但失敗。vue.js中路由器之間的同步變量

App.vue:

<template> 
    <v-app id="app"> 
    <router-view name="sidebar"></router-view> 
    <router-view name="header"></router-view> 
    <router-view name="main"></router-view> 
    <router-view name="footer"></router-view> 
    </v-app> 
</template> 
<script> 
export default { 
    name: 'app', 
    isFoo: false 
} 
</script> 

和Sidebar.vue:

<template> 
    <div id="sidebar" :isOpen="isFoo"></div> 
</template> 
<script> 
    export default { 
    name: 'sidebar', 
    data() { 
     return {isFoo: this.$parent.$options.isFoo} 
    } 
    } 
</script> 

Header.vue:

<template> 
    <button v-on:click="foo()">Button</button> 
</template> 
<script> 
export default { 
    name: 'header', 
    methods: { 
    foo:() => { 
     this.$parent.$options.isFoo = !this.$parent.$options.isFoo 
    } 
    } 
} 
</script> 
沙发
0
0

你提的問題基本上是關於如何跨多個組件共享狀態的應用程序,而且相當一般。

您的代碼不起作用,因爲您已在組件中複製了isFoo而不是僅引用該數據的單一來源。您還應該在每個組件的data屬性中指定反應數據,而不是直接在組件的$options內。

我已經固定的代碼,使其工作:

const Header = { 
 
    template: '<button @click="$parent.isFoo = true">Click Me</button>' 
 
} 
 

 
const Sidebar = { 
 
    template: '<div>Sidebar: {{ $parent.isFoo }}</div>' 
 
} 
 

 
const router = new VueRouter({ 
 
    routes: [ 
 
    { 
 
     path: '/', 
 
     components: { 
 
     header: Header, 
 
     sidebar: Sidebar 
 
     } 
 
    } 
 
    ] 
 
}) 
 

 
new Vue({ 
 
    router, 
 
    el: '#app', 
 
    data: { 
 
    isFoo: false 
 
    } 
 
})
<script src="https://rawgit.com/vuejs/vue/dev/dist/vue.js"></script> 
 
<script src="https://rawgit.com/vuejs/vue-router/dev/dist/vue-router.js"></script> 
 

 
<div id="app"> 
 
    <router-view name="header"></router-view> 
 
    <router-view name="sidebar"></router-view> 
 
</div>

然而我不推薦這種方法。你真的不應該訪問this.$parent,因爲它緊密耦合組件。

我不打算詳細討論這樣做的更好方法,因爲有lots of SO questions涵蓋此主題。

0
votes
answers
50 views
+10

如何使用v-modal從以下腳本發佈lat和lng的值?

-1

這是我的代碼,將標記放在客戶端的google地圖中。我如何能夠捕獲這些值並使用vue js發佈這些值?如何使用v-modal從以下腳本發佈lat和lng的值?

<script> 
function initMap() { 
    var uluru = { 
    lat: -25.363, 
    lng: 131.044 
    }; 
    var mapDiv = document.getElementById('map'); 
    var map = new google.maps.Map(mapDiv, { 
    zoom: 8, 
    center: uluru, 
    clickableIcons: true, 
    }); 

    google.maps.event.addListener(map, 'click', function(e) { 

    if (map.getClickableIcons()) { 
     var Latitude = e.latLng.lat(); 
     var Longitude = e.latLng.lng(); 
     // add your new marker with this info. 
     var marker = new google.maps.Marker({ 
     position: { 
      lat: Latitude, 
      lng: Longitude 
     }, 
     map: map, 
     draggable: true, 
     }); 
     map.clickableIcons = false; 
     // get latitude and longitude after dragging: 
     google.maps.event.addListener(marker, 'dragend', 
     function(marker){ 
      var latLng = marker.latLng; 
      currentLatitude = latLng.lat(); 
      currentLongitude = latLng.lng(); 

}); 


    } 
    }); 
} 
</script> 

<div id="map"></div> 
<!-- Replace the value of the key parameter with your own API key. --> 
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCu8vqg35dD4fNfxlI8ICoycehbL0F6bis&callback=initMap"> 
</script> 

我VUE js代碼是

<script> 
submitBox = new Vue({ 
el: "#submitBox", 
    data: { 
    articles: [], 
    services: [], 
    lat : '', 
    lng : '', 
    username: '', 
    category: '', 
    subcategory: [], 

    }, 
methods: { 
    handelSubmit: function(e) { 
      var vm = this; 
      data = {}; 
      data['lat'] = this.lat; 
      data['lng'] = this.lng; 
      data['username'] = this.username; 
      data['category'] = this.category; 
      data['subcategory'] = this.subcategory; 
      $.ajax({ 
       url: 'http://127.0.0.1:8000/api/add/post/', 
       data: data, 
       type: "POST", 
       dataType: 'json', 
       success: function(e) { 
       if (e.status) 
       { 
       alert("Success") 

       window.location.href= "https://localhost/n2s/registersuccess.html"; 
      } 
       else { 
       vm.response = e; 

       alert(" Failed") 
       } 
      } 
      }); 
      return false; 
} 
}, 
}); 
     </script> 

我如何能捕捉緯度和經度值和崗位,重視使用Ajax請求。如果有人請幫助我實現這一目標,那將會很棒。我可以在地圖上放置標記。我需要使用vue js發佈lat和lng值?

+0

你爲什麼不換地圖到Vue的成分,使它您的主要Vue組件的子項,並通過從地圖組件發出事件來公開經緯度數據?或者只是從Vue組件內初始化映射,以便組件可以訪問它。讓Vue組件一起工作,而不是試圖將數據壓入你的Vue組件實例。 –

+0

可以請你展示如何實現相同? – coder

+0

您也可以從問題中移除您的Google地圖API密鑰。 –

沙发
0
0

您遇到的主要問題是您的Vue組件和地圖相關的代碼是分開的,您需要找出地圖和Vue組件之間的通信方式。

通常你會在Vue組件中初始化地圖,以便Vue組件承擔地圖及其數據/事件等的責任。

我不知道太多關於谷歌地圖API,但這樣的事情應該工作:

const uluru = { 
 
    lat: -25.363, 
 
    lng: 131.044 
 
}; 
 

 
const app = new Vue({ 
 
    el: '#app', 
 
     
 
    data: { 
 
    lat: 0, 
 
    lng: 0, 
 
    }, 
 

 
    methods: { 
 
    createMap() { 
 
     this.map = new google.maps.Map(this.$refs.map, { 
 
     zoom: 8, 
 
     center: uluru, 
 
     clickableIcons: true, 
 
     }); 
 

 
     google.maps.event.addListener(this.map, 'click', e => { 
 
     if (!this.map.getClickableIcons()) { 
 
      return; 
 
     } 
 
      
 
     this.lat = e.latLng.lat(); 
 
     this.lng = e.latLng.lng(); 
 
       
 
     // add your new marker with this info. 
 
     const marker = new google.maps.Marker({ 
 
      position: { 
 
      lat: this.lat, 
 
      lng: this.lng, 
 
      }, 
 
      map: this.map, 
 
      draggable: true, 
 
     }); 
 

 
     this.map.clickableIcons = false; 
 
       
 
     // get latitude and longitude after dragging: 
 
     google.maps.event.addListener(marker, 'dragend', marker => { 
 
      this.lat = marker.latLng.lat(); 
 
      this.lng = marker.latLng.lng(); 
 
     }); 
 
     }); 
 
    }, 
 
    
 
    submit() { 
 
     // Do your AJAX request here with this.lat and this.lng 
 
     console.log('AJAX request'); 
 
     console.log('Lat: ' + this.lat); 
 
     console.log('Lng: ' + this.lng); 
 
    }, 
 
    }, 
 
}); 
 

 
function ready() { 
 
    app.createMap(); 
 
}
.map { 
 
    width: 400px; 
 
    height: 200px; 
 
}
<script src="https://rawgit.com/vuejs/vue/dev/dist/vue.js"></script> 
 
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCu8vqg35dD4fNfxlI8ICoycehbL0F6bis&callback=ready"></script> 
 

 
<div id="app"> 
 
    <button @click="submit">Submit</button> 
 
    lat: {{ lat }}, lng: {{ lng }} 
 
    
 
    <div class="map" ref="map"></div> 
 
</div>

0
votes
answers
42 views
+10

vuex如何改變store中的多個屬性,如在redux中?

1

的狀態突變Vuex方法是如下:vuex如何改變store中的多個屬性,如在redux中?

const store = new Vuex.Store({ 
    state: { 
    fetching: false, 
    board: null 
    }, 
    mutations: { 
    setFething (state) { 
     state.fetching = true 
    }, 
    setCurrentBoard (state, board) { 
     state.board = board 
     state.fetching = false 
    } 
    } 
}) 

但我擔心它會引發兩個轉變爲boardfetching每個屬性獨立而不是一個,我的觀點將被更新雙重倍。這只是一個簡單的例子,我有更復雜的屬性突變,會更好地突變一個突變。 vuex有可能嗎?

我喜歡Redux的方法返回突變只有一次狀態對象:

initialState = { board: null, fetching: false }; 
export default function reducer(state = initialState, action = {}) { 
    switch (action.type) { 
    case Constants.SET_FETCHING: 
     return { ...state, fetching: true }; 

    case Constants.SET_CURRENT_BOARD: 
     return { ...state, ...action.board, fetching: false }; 
} 
+0

使用Vuex acrions。創建您同時執行多項更改的操作。 – WaldemarIce

+0

這種情況是我不能一次返回新的不可變狀態對象,但我必須分別改變每個屬性。 – luzny

沙发
0
2

那麼,你在尋找這樣的事情?

var store = new Vuex.Store({ 
 
    state: { 
 
    id: 1, 
 
    name: 'aaa', 
 
    last: 'bbb' 
 
    }, 
 
    mutations: { 
 
    change (state, payload) { 
 
     state = Object.assign(state, payload) 
 
    } 
 
    } 
 
}) 
 

 
new Vue({ 
 
    el: '#app', 
 
    store, 
 
    created() { 
 
    setTimeout(_ => { 
 
     this.$store.commit('change', { 
 
     id: 2, 
 
     last: 'ccc' 
 
     }) 
 
    }, 2000) 
 
    setTimeout(_ => { 
 
     this.$store.commit('change', { 
 
     name: 'ddd' 
 
     }) 
 
    }, 4000) 
 
    } 
 
})
<div id="app"> 
 
    {{ $store.state.id }} 
 
    <br> 
 
    {{ $store.state.name }} 
 
    <br> 
 
    {{ $store.state.last }} 
 
</div> 
 

 
<script src="https://unpkg.com/vue"></script> 
 
<script src="https://unpkg.com/vuex"></script>

0
votes
answers
17 views
+10

導入Vue.js庫並通過Vue-CLI安裝它有什麼區別?

0

能否請您解釋一下什麼是使用Vue公司與Vue公司Vue公司不同的安裝方式爲建設單頁網站(頁面路由)和電子應用之間的主要區別在於:導入Vue.js庫並通過Vue-CLI安裝它有什麼區別?

  • 進口Vue.js通過<script>
  • 庫通過Vue公司-CLI安裝它

installation guide並不能真正幫助理解上的差異。

如果我只通過<script>導入Vue,我的網站/應用程序是否會運行得更慢?

+0

使用CLI對scaffhold應用程序給予更多的靈活性.Mostly您可以使用.vue文件(單個文件Vue組件) - 感謝Webpack和Vue Loader。 –

+0

@BelminBedak是「單一文件Vue組件」在您的網站/應用程序中構建自定義組件的首選方法? – Un1

+0

在我的工作流程中 - 是的。 –

沙发
0
1

<script>包括將Vue庫包含在您的網頁中,就像您使用其他任何JavaScript庫一樣。 Vue將在window對象上提供,供您全局訪問。即使您使用vue-cli,也必須以這種或那種方式包含所有外部JavaScript。

vue-cli只是一個從模板生成Vue項目的工具。該設置實際上取決於您使用的模板;我想大多數人可能會使用webpack模板來處理大中型Vue項目。這將初始化包含開發,調試,測試和構建Vue項目所需的所有文件的節點項目目錄。 Webpack負責將所有模塊捆綁到一個單獨的JavaScript包中,該包通過<script>包含在網頁中。您還可以從vue-loader中受益,它允許您在*.vue文件中編寫Vue組件。

如果我只是通過<script>導入Vue,我的網站/應用程序會運行得更慢嗎?

我的意思是,不是真的,沒有(你的發展速度可能會雖然,因爲你不會從所有的鐘聲受益和口哨聲是vue-cli套你了阻礙)。您的問題更多地適用於開發Vue Web應用程序時所遵循的開發方法。

+1

感謝您的解釋。所以基本上,根據我的理解,如果我只是想與Vue混戰,我應該將它作爲腳本導入,但如果我想構建網站/應用程序,我最好使用Vue-CLI,因爲它簡化了開發流程並打包它很好地使用Webpack。知道了謝謝 – Un1

0
votes
answers
54 views
+10

春天 - JPA - Hibernate的如何使用EntityManager的

1

我嘗試使用以下技術堆棧來構建REST應用:春天 - JPA - Hibernate的如何使用EntityManager的

  • VueJs
  • JPA(休眠)

這是我第一次編寫Sping應用程序和Web應用程序開發的經驗。

我有4代表在我的數據庫:

  • 語言
  • 句子
  • 規則
  • 用戶

例如,在規則有:

Rule create(EntityManagerFactory factory, String type, String hint, String help, Language language); 
List<Rule> readAll(EntityManagerFactory factory); 
Rule readID(EntityManagerFactory factory, int id); 
void update(EntityManagerFactory factory, String type, String hint, String help, Language language); 

所以有我的問題:

  1. 當我創建的每個表控制器,我用的CRUD方法來修改(或沒有)我的數據庫,我返回一個觀點我HTMLVueJS一部分。但我的方法需要一個EntityManagerFactory,我應該在每個控制器類中創建一個字段,或者這不是我應該怎麼做?
  2. 我需要創建一個bean文件並配置它,或者persistence.xmlpom.xml夠了嗎?

感謝

+2

你應該看看Spring Boot。你將不需要這些CRUD方法。 https://spring.io/guides/gs/accessing-data-jpa/ –

+0

即使你不使用Spring Boot,也應該使用spring數據jpa。即使你不這樣做,你一定需要閱讀關於數據訪問和JPA集成的Spring文檔:https://docs.spring.io/spring/docs/current/spring-framework-reference/data-access。 HTML。閱讀文檔是該工作的一部分。從長遠來看,它將爲您節省大量時間。 –

沙发
0
2

好像你的第一個問題可以分解成多個問題。

當我爲每個表創建控制器時,我使用CRUD方法來修改(或不)我的數據庫,並且爲HTML和VueJS部分返回一個視圖。但我的方法需要一個EntityManagerFactory,我應該在每個控制器類中創建一個字段,或者這不是我應該怎麼做?

由於您已經接受了建議使用spring-data-jpa的答案。您將處理實體和存儲庫。

實體是將與您的數據庫交互的JPA託管bean。

@Entity 
@Table(name = "rule") 
public class Rule { 
    @Id 
    @GeneratedValue(strategy=GenerationType.AUTO) 
    long id; 
    String type; 
    ... 
    @OneToOne 
    @JoinColumn(...) 
    Language language; 
} 

存儲庫將提供對數據庫執行操作所需的所有必要操作。使用JPA,您可以創建一個擴展CrudRepository的接口,它將爲您提供一些免費的CRUD操作。 findOne(/* id */)delete()save()

@Repository 
public interface RuleRepository extends CrudRepository<Rule, Long> { 

    // You can easily specify custom finders 
    public List<Rule> findByType(String type); 

} 

但我的方法需要一個EntityManagerFactory的,我應該在每個控制器類中創建一個字段或這不是我應該怎麼辦?

它通常被抱怨有一個請求/響應對象是JPA實體。請參閱鏈接的答案should i use jpa entity in rest request and/or response

您可以採取多種方法來接收控制器請求並將響應發送到客戶端項目。

@Controller 
public class RuleController { 
    @Autowired 
    private RuleRepository ruleRepository; 

    // Approach 1: Use Request Parameters - enforce inputs 
    @PostMapping("/rule/:id") 
    public Rule postWithRequestParams(@PathParam("id") Long id, 
        @RequestParam("type") String type, 
        @RequestParam("hint") String hint, 
        @RequestParam("languageField1") String languageField1) { 
     Rule inputRule = new Rule(id, type, hint, new Language(languageField1)); 

     Rule responseRule = ruleRepository.save(inputRule); 
     return responseRule; // I would imagine you would want to set up a model for the response itself 
    } 



    // Approach 2: Use RequestBody - serialize Rule from the request 
    @PostMapping("/rule/:id") 
    public Rule postWithRequestParams(@PathParam("id") Long id, @RequestBody Rule inputRule) { 
     Rule responseRule = ruleRepository.save(inputRule); 
     return responseRule; 
    } 

我需要創建一個bean文件,並配置它或persistence.xml中和pom.xml的是夠不夠?

如果已經添加spring-boot-starter-data-jpa作爲依賴,很多bean配置中已經爲你做。

在你main/src/resources(你應該有一個application.propertiesapplication.yml

spring.datasource.url= # JDBC url of the database. 
spring.datasource.username= # Login user of the database. 
spring.datasource.password= # Login password of the database. 

春天做了很多的魔術和繁重的你。

+0

我還有一個問題,在我的方法控制器中,是否必須返回關聯的視圖或ModelMap?(如果我不返回它,視圖可以訪問ModelMap)因爲我不知道是否讓控制器猜測他指的是哪個視圖是一種好方法。 – Unconnu

+0

這可能需要另一個問題。 – shinjw

板凳
0
0

你一定要對Spring Boothttp://start.spring.io)一看,使得更容易啓動Web應用程序的開發。至於持久層,您可以使用Spring Data JPA(已包含Hibernate)模塊,該模塊也可以輕鬆與Spring Boot集成。春天數據的美麗已經寫在默認情況下大多數查詢如save(), remove(), find()等等。你只需要定義將被Spring Data使用的對象。

更新:如果您使用的春天啓動,那麼你就不需要實體管理器中看到我的春節,引導REST API例如here

地板
0
2

。你所要做的就是在你的屬性文件中定義數據源。而在我們的配置類中創建一個Bean就像:

@Bean 
@Primary 
@ConfigurationProperties(prefix = "spring.datasource") 
public DataSource datasource() { 
    return DataSourceBuilder.create().build(); 
} 

現在的你可以用repositories.They處理剩下的事情會像:

import org.springframework.data.repository.CrudRepository; 

public interface RuleRepository extends CrudRepository<Rule, Long> { 

} 

在你的控制器,你會用它喜歡:

@Autowired 
private RuleRepository ruleRepository; 

@Get 
@Path("/getRule/:id") 
public Rule find(@PathParam("id")Long id){ 
    return ruleRepository.findOne(id); 
} 

這些依賴關係我在我的gradle項目中使用。你會發現相同的Maven版本:

compile('org.springframework.boot:spring-boot-starter-data-jpa') 
compile group: 'mysql', name: 'mysql-connector-java' 
+0

這是spring-data-jpa。您可能希望將相關依賴項包含在您的答案中。 – shinjw

+0

謝謝,我用依賴關係更新了它。 –

0
votes
answers
19 views
+10

強制輸入表單在vue.js中輸入大寫後端

1

我試着輸入'a001',顯示屏會顯示'A001',因爲CSS規則。 在傳遞到後端之前將其轉換爲大寫字符的正確/最佳方式是什麼?強制輸入表單在vue.js中輸入大寫後端

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    myid: '' 
 
    }, 
 
    methods: { 
 
    click: function() { 
 
     console.log('clicked id=', this.myid) 
 
    } 
 
    } 
 
});
div input { 
 
    text-transform: uppercase 
 
}
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script> 
 
<div id="app"> 
 
    <input type="text" v-model="myid" placeholder="My ID" /> 
 
    <button type="button" @click="click">Submit</button> 
 
</div>

+0

如何使用.toUpperCase()? – 2017-12-18 07:52:18

+0

我想知道是否有CSS規則來簡化額外的代碼,如果需要多個字段進行轉換 –

+0

CSS has style =「text-transform:uppercase」但它只是可視化的,如果您嘗試發送數據,它會通過你已經鍵入,而不是你如何看待它,即大寫字母。 JavaScript是唯一的方法。 – 2017-12-18 08:10:32

沙发
0
0

HTML:

<div id="app"> 
    <input type="text" v-model="message" /> 
    <h4>{{ message | uppercase }}</h4> 
</div> 

控制器:

Vue.filter('uppercase', function (value) { 
    return value.toUpperCase() 
}) 

new Vue({ 
    el: '#app', 
    data: { 
    message: 'foo' 
    } 
}) 

我希望這能解決你的問題。

板凳
0
0

您可以使用JavaScript函數調用toUpperCase()這樣的:

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    myid: '' 
 
    }, 
 
    methods: { 
 
    click: function() { 
 
    var str = this.myid.toUpperCase(); 
 
     console.log('clicked id=', str) 
 
    } 
 
    } 
 
});
div input { 
 
    text-transform: uppercase 
 
}
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script> 
 
<div id="app"> 
 
    <input type="text" v-model="myid" placeholder="My ID" /> 
 
    <button type="button" @click="click">Submit</button> 
 
</div>

現在你可以刪除CSS規則,如果你只是想傳遞的價值資本化,而不顯示它或要麼你可以收下。 希望幫助:)

0
votes
answers
21 views
+10

VueJs插入到嵌套列表

2

我想讓用戶創建我的網站的結構。例如,我有建築物和房間。用戶必須能夠創建建築物並隨後將房間插入其中。然而,我試圖做的似乎並沒有達到它:VueJs插入到嵌套列表

JSFiddle到目前爲止我所做的。

JS

new Vue({ 
    el: '#vue-app', 

    data: { 
    buildings: [] 
    }, 

    computed: { 
    buildingCount() { 
     return this.buildings.length 
    }, 
    getBuildingRoomsLength(section) { 
     return this.buildings.rooms.length 
    } 
    }, 

    methods: {  
    addNewRoomToBuilding(buildingId, newRoom) { 
     if(newRoom !== undefined) {  this.buildings[parseInt(buildingId)-1].rooms.push(newRoom.title) 
     console.log(this.buildings[parseInt(buildingId)-1]) 
     } 
    }, 
    addNewBuilding() { 
     this.buildings.push({ 
     id: this.buildings.length+1, 
     rooms: [] 
     }) 
    }, 

    deleteTodo(todo) { 
     this.todos.$remove(todo) 
    } 
    } 
}); 

我不知道如何使它發揮作用。我注意到的一些事情是,現在的房間模型對於所有建築物都是一樣的,我必須根據buildingId對其進行更改,但是我還是無法弄清楚。你能幫我怎麼做。

+0

的代碼似乎是工作。問題是什麼? – samayo

+0

僅供參考,您粘貼錯誤代碼 – HEATH3N

+0

對不起,我修正了它。問題是,如果插入2個建築物並編輯其中一個的房間輸入文本,則另一個的輸入也會更改。 – AGoranov

沙发
0
1

通過將建築物ID附加到名稱的末尾,使建築物陣列中的每個項目都具有唯一的模型。

所以型號變爲v-model="newRoom[building.id]"

又通同放入你的方法addNewRoomToBuilding(building.id, newRoom[building.id])

+0

謝謝,它完美地解決了我的問題。 – AGoranov

0
votes
answers
33 views
+10

Vue中是否有任何函數來檢查子組件中的DOM是否已更新

1

我有這個問題,其中,我無法選擇子組件內的DOM元素。據記載,我正在使用更新的方法,但在根組件內。Vue中是否有任何函數來檢查子組件中的DOM是否已更新

而且它的工作原理有點不可思議,

Vue.component('newdiv', { 
 
    template: ` 
 
    <div class="msg-wrap"> 
 
     <p v-html='this.$parent.message' class="msg-p"></p> 
 
     <p v-html='this.$parent.message1' class="msg-p"></p> 
 
    </div> 
 
`, 
 
    updated: function() { 
 
    this.$nextTick(function() { 
 
     $('.blue').css('color', 'blue'); 
 
    }); 
 
    } 
 
}); 
 

 
new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    message: 'Hello this is para 1', 
 
    message1: 'Hello this is para 2', 
 
    }, 
 
    methods: { 
 
    ajaxCallEx() { 
 
     // think ajax call has happened and returns an html 
 
     this.message = "<p> Hiiii This is a p1 <span class='red'> make me red </span> </p>"; 
 
     this.message1 = "<p> Hiiii This is a p2 <span class='blue'> make me blue </span> </p>"; 
 
    } 
 
    }, 
 
    updated: function() { 
 
    this.$nextTick(function() { 
 
     // you will see that this dosen't work as the element is not present 
 
     $('.red').css('color', 'red'); 
 

 
    }); 
 
    } 
 
})
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script> 
 
<script src="https://unpkg.com/jquery"></script> 
 

 
<div id="app"> 
 

 
    <newdiv></newdiv> 
 
    <button @click="ajaxCallEx">Clik Me</button> 
 
</div>

這裏按鈕點擊藍色的第變爲藍色,而紅色remmain,因爲它是(因爲它不存在於DOM然而)。

所以我的第一個假設是父組件的更新方法先被調用,然後發生子元素的渲染。這適用於這種情況。但只是爲了證明我的權利,我沒有嘗試以下方法,

Vue.component('newdiv', { 
 
    template: ` 
 
    <div class="msg-wrap"> 
 
    <p v-html='this.$parent.message' class="msg-p"></p> 
 
    <p v-html='this.$parent.message1' class="msg-p"></p> 
 
    </div> 
 
`, 
 
    updated: function() { 
 
    this.$nextTick(function() { 
 
     $('.blue').css('color', 'blue'); 
 
    }); 
 
    } 
 
}); 
 

 
new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    message: 'Hello this is para 1', 
 
    message1: 'Hello this is para 2', 
 
    message3: 'Hello this is root para' 
 
    }, 
 
    methods: { 
 
    ajaxCallEx() { 
 
     // think ajax call has happened and returns an html 
 
     this.message = "<p> Hiiii This is a p1 <span class='red'> make me red </span> </p>"; 
 
     this.message1 = "<p> Hiiii This is a p2 <span class='blue'> make me blue </span> </p>"; 
 
     this.message3 = "<p> Hiiii This is a root para <span class='green'> make me green</span> </p>"; 
 
    } 
 
    }, 
 
    updated: function() { 
 
    this.$nextTick(function() { 
 
     // you will see that this dosen't work as the element is not present 
 
     $('.red').css('color', 'red'); 
 

 
     // this will work and it will only color the p directly within the root. 
 
     $('.green').css('color', 'green'); 
 
    }); 
 
    } 
 
})
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script> 
 
<script src="https://unpkg.com/jquery"></script> 
 

 
<div id="app"> 
 
    <p v-html='this.message3'></p> 
 
    <newdiv></newdiv> 
 
    <button @click="ajaxCallEx">Clik Me</button> 
 
</div>

按照從最後的實驗我的理解,在按鈕的點擊,我希望綠轉綠,藍轉藍色,而紅色不應該工作。但在這種情況下,檢測到的所有元素和顏色都已正確塗漆。

我想知道更新的工作原因,爲什麼在第一種情況下,它無法獲取子組件中的元素,爲什麼在第二種情況下它能夠獲取元素。 是否有一個鉤子或事件讓root知道它的所有孩子已經被渲染?

沙发
0
1

你在這裏做的事情很奇怪。你不應該達到的message從父,但將它作爲一個道具:

Vue.component('newdiv', { 
    template: ` 
     <div class="msg-wrap"> 
      <p v-html='message' class="msg-p"></p> 
      <p v-html='message1' class="msg-p"></p> 
     </div> 
     `, 
    props: ['message', 'message1'] 
}); 

new Vue({ 
    el: '#app', 
    methods:{ 
    ajaxCallEx(){ 
     this.message = "<p> Hiiii This is a p1 <span class='red'> make me red </span> </p>"; 
     this.message1 = "<p> Hiiii This is a p2 <span class='blue'> make me blue </span> </p>"; 
    } 
    }, 
    data:{ 
    message: 'Hello this is para 1', 
    message1: 'Hello this is para 2' 
    } 
}) 

這裏的的jsfiddle:https://jsfiddle.net/craig_h_411/e6nvb63m/

顯然,這並不風格做任何事,這樣做,你只是需要將這些類添加到您的文件中,而不是注入它們。

.red{ 
    color:red 
} 

.blue{ 
    color:blue 
} 

參見:https://jsfiddle.net/craig_h_411/60o3ypbf/

如果由於某種原因,你就需要在運行時應用樣式,你可以使用一個watcher觀看道具和應用的顏色(這需要在一個$nextTick做),這裏的整個事情:

Vue.component('newdiv', { 
    template: ` 
     <div class="msg-wrap"> 
      <p v-html='message' class="msg-p"></p> 
      <p v-html='message1' class="msg-p"></p> 
     </div> 
     `, 
    props: ['message', 'message1'], 
    methods: { 
    applyColor(className, color) { 
     let els = document.getElementsByClassName(className) 
     Array.prototype.forEach.call(els, el => { 
      el.style.color = color 
     }) 
     }, 
     applyClassStyles() { 
     this.applyColor('red', 'red') 
     this.applyColor('blue', 'blue') 
     } 
    }, 
    watch: { 
    message() { 
     this.$nextTick(() => { 
      this.applyClassStyles(); 
     }); 

     }, 
     message1() { 
     this.$nextTick(() => { 
      this.applyClassStyles(); 
     }); 
     } 
    }, 

}); 

new Vue({ 
    el: '#app', 
    methods: { 
    ajaxCallEx() { 
     this.message = "<p> Hiiii This is a p1 <span class='red'> make me red </span> </p>"; 
     this.message1 = "<p> Hiiii This is a p2 <span class='blue'> make me blue </span> </p>"; 
    } 
    }, 
    data: { 
    message: 'Hello this is para 1', 
    message1: 'Hello this is para 2' 
    } 
}) 

我只是用香草JavaScript,但你能堅持到jQuery的達到相同的效果,而且這裏的的jsfiddle:https://jsfiddle.net/craig_h_411/zdfxodyg/

+0

這個問題只是一個不同場景的模型。這不是造型。當我必須觸發在jQuery中實現的特定腳本時,我有一定的場景。在這種情況下,我依賴於來自根的數據。我需要一個鉤子來從根目錄中激發jquery(鉤子可以是一個事件或生命週期類),但是它只能在子呈現後觸發。 –

+0

Infact我想知道如何以及何時調用這個更新的函數。在子元素更新之前還是在什麼時候?實際的情況。 –

+0

很難確切地知道你需要什麼而不知道你在做什麼,但是當子組件完全呈現時你不能直接發送到總線上:https:// jsfiddle。淨/ craig_h_411/mqLeLL02/ –

0
votes
answers
19 views
+10

新的數據到陣列

0

我想有三個輸入數據添加到每個數據數組。新的數據到陣列

輸入如下:

<input type="range" min="0" max="10" step="1" v-model="newData">{{ newData }} 
<button @click="addData(newData, 'first')">Add</button> 

和腳本

const app = new Vue({ 
    el: '#app', 
    data: { 
    newData: 5, 
    dimensions: [ 
    { 
     title: 'first', 
     data: [0, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0] 
    }, 
    { 
     title: 'second', 
     data: [1, 3, 8, 1, 2, 3, 3, 3, 5, 1, 9, 2, 4, 6, 0] 
    }, 
    { 
     title: 'third', 
     data: [6, 1, 6, 1, 2, 5, 3, 9, 5, 1, 0, 2, 4, 4, 10] 
    }] 
    }, 
    methods: { 
    addData() { 
     ??? 
    } 
    } 
}) 

應我的addData方法是什麼樣的?我無法推到特定的層面。我只是設法添加一個新的。

我很高興,如果有人能幫助我:)

沙发
0
2

更改addData()方法接受兩個參數,數據和其推維度。然後它應該如下所示:

addData(mData, mDimension) { 
    this.dimensions.forEach((dimension) => { 
    if (dimension['title'] === mDimension) { 
     dimension['data'].push(parseInt(mData)); 
    } 
    }); 
} 

不要忘記在您的方法調用中傳遞數據和維度。

+0

謝謝:) 如何在方法調用中傳遞數據和維度? – bbbmazon

+0

你會像其他方法一樣通過它們。所以'@ click =「addData(newData,'first')」',例如。 – HEATH3N

+0

我仍然得到_ReferenceError:尺寸未定義_ from addData方法 – bbbmazon

0
votes
answers
40 views
+10

.eslintignore文件不能正常工作

0

我正在使用一個使用ESLint的Vue模板項目。我想將其關閉,所以我遵循這些說明並提出與.eslintignore文件不能正常工作

**/*.js 

稱爲.eslintignore文件我的項目根的內側。但是,我仍然收到eslint錯誤消息。我究竟做錯了什麼?

+0

評論這整個塊,你想從你的掉毛代碼禁用eslint? – samayo

+0

@samayo我對eslint一無所知,我只想讓這些錯誤信息消失 –

+0

我[非常理解你](https://github.com/vuejs-templates/webpack/issues/73#issuecomment- 324641423) – samayo

沙发
0
2

我愛ESLint,但有時候你希望它完全忽略整個文件。添加到您的文件的頂部:

/* eslint-disable */

它需要在評論/* this kind */,不//這樣。

而ESLint不會再抱怨你的文件了!

+0

謝謝,我會嘗試這個,如果我找不到項目範圍的解決方案 –

+0

當然,爲什麼不。我曾經在一個小項目中使用過它。 – Sam

板凳
0
1

您應該使用**/*而不是**/*.js,因爲第一個會忽略.js.vue文件。

或者你可以在你build/webpack.base.conf.js

{ 
    test: /.(js|vue)$/, 
    loader: 'eslint-loader', 
    enforce: "pre", 
    include: [resolve('src'), resolve('test')], 
    options: { 
     formatter: require('eslint-friendly-formatter') 
    } 
} 
+0

這是有道理的,但改變它後,我仍然收到相同的錯誤信息。 –

+0

嘗試重新啓動服務器。它應該工作,特別是第二個選項,因爲我也關閉了 – samayo

+0

不知何故,這似乎並沒有工作。我停止開發服務器並再次運行'npm run dev',但得到相同的消息。 –