how to know if the particular HTML attribute has the DOM property or not?

  • In Angular 2, Interpolation works with properties and events but for ATTRIBUTES we have to use \'attr\' keyword for attribute binding. So, How to know if the particular HTML attribute has the DOM property or not?

    In other words how to know for which element we have to use attr keyword?


  • My view is like this :

    <div class="panel panel-default panel-store-info"> ... <div id="app"> <AddFavoriteProduct></AddFavoriteProduct> </div> .... </div>

    My component is like this :

    <template> <a href="javascript:" class="btn btn-block btn-success" @click="addFavoriteProduct({{ $product->id }})"> <span class="fa fa-heart"></span>&nbsp;Favorite </a> </template> <script> export default{ name: 'AddFavoriteProduct', props:['idProduct'], methods:{ addFavoriteProduct(event){ = true const payload= {id_product: this.idProduct} this.$store.dispatch('addFavoriteProduct', payload) setTimeout(function () { location.reload(true) }, 1500); } } } </script>

    When click button favorite, it will call controller on the laravel

    I had register on the app.js like this :

    ... import AddFavoriteProduct from './components/AddFavoriteProduct.vue'; ... components: { ... AddFavoriteProduct }, ...

    When executed, the button favorite does not appear.

    Please help.


    There exist error like this :

    [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option. (found in root instance)

    Whereas I had register it

    Three fixes that I can see...

    First, omit name: 'AddFavoriteProduct' in your component (it's not required for single-file components) and use kebab-case for the component in your template. Second, you appear to be missing the id-product prop

    <add-favorite-product :id-product="someProductIdFromSomewhere"></<add-favorite-product>

    Third, you don't use interpolation in bound properties and you don't even need to pass anything other than the $event to your addFavoriteProduct method


    Are you getting any error?

    One mistake I see in your code is, you are taking one parameter: event, while you are trying to pass {{ $product->id }} to it, which seems a laravel variable. (Sorry, I don't know laravel)

    If you want both event and product->id in method, you have to pass both parameters from HTML, like it is in docs with help of $event

    <template> <a href="javascript:" class="btn btn-block btn-success" @click="addFavoriteProduct({{ $product->id }}, $event)"> <span class="fa fa-heart"></span>&nbsp;Favorite </a> </template> <script> export default{ name: 'AddFavoriteProduct', // I am not sure if name is needed, don't remember seeing it in docs props:['idProduct'], methods:{ addFavoriteProduct(productId, event){ = true const payload= {id_product: this.idProduct} this.$store.dispatch('addFavoriteProduct', payload) setTimeout(function () { location.reload(true) }, 1500); } } } </script>

    Another problem is you are expecting a prop idProduct, which is not being passed to component, You have to pass it like this in kebab-case:

    <div class="panel panel-default panel-store-info"> ... <div id="app"> <AddFavoriteProduct id-product="4"></AddFavoriteProduct> </div> .... </div>

    HTML is case-insensitive, so your custom button element <AddFavoriteProduct></AddFavoriteProduct> is being interpreted as your Vue warning reports: <addfavoriteproduct>

    When you name your component with camelCase or PascalCase, the corresponding tag name you should be using in your markup should be kebab-cased like so: <add-favorite-product></add-favorite-product>

    Vue knows to do the conversion from "dash-letter" to "uppercase-letter".

    I am not used to vuex, as I generally implement my own store as a POJO object - not graduated with the learning curve of vuex. So can't provide a working solution with vuex, however to my knowledge, you need to kind of import the action(s) in your component - you can try the below

    <template> <a href="javascript:" class="btn btn-block btn-success" @click="addFavoriteProduct({{ $product->id }}, $event)"> <span class="fa fa-heart"></span>&nbsp;Favorite </a> </template> <script> export default{ props:['idProduct'], vuex: { actions: { setFavoriteProduct: setFavoriteProduct // assuming you named the action as setFavoriteProduct in vuex // avoid duplicate naming for easy debugging } } methods:{ addFavoriteProduct(productId, event){ = true const payload= {id_product: this.idProduct} // this.$store.dispatch('addFavoriteProduct', payload) this.setFavoriteProduct(payload); setTimeout(function () { location.reload(true) }, 1500); } }, }

    Note: From Vuex2 the store.dispatch() accepts only one argument (not a problem with your current use case), however if you need to pass multiple arguments to your action you can work around like

    store.dispatch('setSplitData',[data[0], data [1]]) // in the action: setSplitData (context, [data1, data2]) { // uses ES6 argument destructuring OR //... with an object: store.dispatch('setSplitData',{ data1: data[0], data2: data [1], }) // in the action: setSplitData (context, { data1, data2 }) { // uses ES6 argument destructuring //source: LinusBorg's comment at


    read more
  • 相信使用过Oracle数据库的人一定碰到过“ORA-12154: TNS: 无法解析指定的连接标识符”错误,我在此做一个小小的总结。

    在程序中连接Oracle数据库的方式与其他常用数据库,如:MySql,Sql Server不同,这些数据库可以通过直接指定IP的方式连接,但是Oracle则需要通过Oracle客户端配置网络服务名的方式来连接。否则就会出现“ORA-12154: TNS: 无法解析指定的连接标识符”。配置Oracle客户端详细步骤如下:
    安装好Oracle客户端之后,在开始菜单中依次找到“Oracle - OraClient10g_home1—>配置和移植工具—>Net Manager”并打开(Win7,Win8用户如果没有取得Administrator账号登陆需要以管理员方式运行),依次展开“Oracle Net配置—>本地—>服务命名”点击左侧“加号”配置新的网络服务







    通过上面的服务名称,可以看出我安装的服务名就是“ORCL”,或者在服务端通过SQL Plus使用sys账号登陆,输入命令
    show parameter service_name查看。
    OracleOraDb10g_home1iSQL*Plus是SQL Plus的服务,如果不习惯在命令行下面操作数据库,可以不用启动。

    当在Oracle客户端中配置好Net Manager中配置好服务后就可以通过我们配置的网络服务名访问Oracle数据库了,此配置实质想D:\Oracle\product\10.2.0\client_1\NETWORK\ADMIN\tnsnames.ora中增加了一行配置(由于我的Oracle是安装在D盘Oracle目录中,具体路径根据安装时选择的路径而定)。

    <a title="复制代码">复制代码</a>

    # tnsnames.ora Network Configuration File: d:\Oracle\product\10.2.0\client_1\NETWORK\ADMIN\tnsnames.ora # Generated by Oracle configuration tools. ORCL = (DESCRIPTION = (ADDRESS_LIST = (ADDRESS = (PROTOCOL = TCP)(HOST = = 1521)) ) (CONNECT_DATA = (SERVICE_NAME = ORCL) ) )

    <a title="复制代码">复制代码</a>

    如果在同一台电脑上面同时安装了Oracle客户端和服务端,那么在服务端的安装目录中也会存在同样的配置文件D:\Oracle\product\10.2.0\db_1\NETWORK\ADMIN\tnsnames.ora,在这种情况下如果我们配置好了客户端Net Manager然后连接Oracle数据库,可能会出现“ORA-12154: TNS: 无法解析指定的连接标识符”这时,你就应该怀疑,我到底访问的是哪个路径下的配置文件呢?此时可以使用tnsping命令


    如果你是在客户端Net Manager中配置的网络服务,但是此时解析出来的使用参数文件却是D:\Oracle\product\10.2.0\db_1\NETWORK\ADMIN\sqlnet.ora,那么我想你应该明白了。这种情况有两种解决办法:
    第一:在服务端的Net Manager也配置相同的网络服务,或者直接拷贝D:\Oracle\product\10.2.0\client_1\NETWORK\ADMIN\tnsnames.ora中的配置到D:\Oracle\product\10.2.0\db_1\NETWORK\ADMIN\tnsnames.ora,每次配置了新的网络服务你都需要这么做,如果不想这么麻烦那就使用第二种解决办法。

    当我安装好PLSQL Developer软件后登陆时任然出现了“ORA-12154: TNS: 无法解析指定的连接标识符”,如果是Win7,Win8用户甚至可以会出现弹出一个白框的情况,这时需要以管理员身份运行PLSQL Developer,并且确保你的PLSQL Developer是读取的oracle客户端配置,直接取消登陆,在PLSQL Developer工具栏中找到“Tools—>Preferences”,在Oracle的Connection节点中找到Oracle Home选择OraClient10g_home1,保存后关闭PLSQL Developer就可以正常登陆了。


    需要注意的是,在安装PLSQL Developer时不能安装在带有括号的目录中,如64bit系统的Program Files (x86)目录,就会出现无论你怎么设置,它依然不停的弹出“ORA-12154: TNS: 无法解析指定的连接标识符”。同样的问题也会出现在其他Oracle数据库管理软件中,比如Toad for Oracle

    “ORA-12154: TNS: 无法解析指定的连接标识符”是使用Oracle数据库的新手遇到的比较常见的问题之一,只要我们了解了它的工作方式,冷静排查,相信很容易就能够找到问题的解决办法的。



    read more
  • 问题

    I\'d like to make dynamic navbar with categories for my app (where categories are taken from database and user can always add his own categories). I have many pages in my app and for each page there\'s a single controller method (let\'s say). Navbar is displayed on each app page and it contains dynamic data from dabatase. So inside each controller method I would have to return these categories for navbar.

    For example:

    /** * @Route(\"/\") */ public function firstPage() { return $this->render(\'file.html.twig\', [ //... the method\'s data \'categoriesForNavbar\' => $categoriesForNavbar ]); } /** * @Route(\"/page\") */ public function secondPage() { return $this->render(\'file2.html.twig\', [ //... the method\'s data \'categoriesForNavbar\' => $categoriesForNavbar ]); } /** * @Route(\"/another-page\") */ public function thirdPage() { return $this->render(\'file3.html.twig\', [ //... the methods\'s data \'categoriesForNavbar\' => $categoriesForNavbar ]); }

    This is just an example but the $categoriesForNavbar is a variable to which Doctrine returns categories from database that they will be placed in navbar.
    So I have to return these categories inside every controller method. I\'d like to make it once for every page.

    Could you tell me please what is the best practice to make it? Thank you in advance for answers.



    Have you looked at KnpMenuBundle? You can build menus as services. Use the em to fetch the Category[] arays you need to populate your different menus.

    share|improve this answer

    answered Nov 8 at 2:06

    Leo HajderLeo Hajder 122 bronze badges

    Thank you! I'm going to try it in the future – BartTux Nov 8 at 9:11

    add a comment |



    Try the embedding controllers in Symfony, this link can help you :

    <ul class="nav"> {{ render(controller('nameBundle:Controller:nameAction')) }} </ul>

    share|improve this answer

    edited Nov 8 at 16:50

    answered Nov 7 at 11:19

    Mohamed CHIBANIMohamed CHIBANI 4466 bronze badges


    While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review – Abhishek Gurjar Nov 7 at 11:50

    okay, i modified the post – Mohamed CHIBANI Nov 8 at 16:51

    add a comment |

    read more








Powered by NodeBB | 备案号:宁ICP备15000671号